Skip to content

pavloniym/vue-and-devices-mocks

Repository files navigation

Vue and Devices Mocks

Vector devices mockups Includes:

  • iphone
  • ipad
  • ipad-mini
  • mac-browser

Example

Installation

npm install vue-and-devices-mocks # OR yarn add vue-and-devices-mocks

Basic usage

  • Import device component from vue-and-devices-mocks
  • Register it as component
  • Use it in your template
  • Add props and content
<template>
    <device v-bind="$data">
        // ... your awesome content here
    </device>
</template>

<script>
    import device from 'vue-and-devices-mocks'
    export default {
        components: {device},
        data() {
            return {
                type: 'iphone',
                scale: 7,
                width: null,
                height: null,
                skins: ['black', 'noShadow']
            }
        },
    }
</script>

Props

type

  • Type: String
  • Default: null

Device type: iphone, ipad, ipad-mini, browser


scale

  • Type: Number
  • Default: 1

Scale number, from 1 to 30


width

  • Type: String
  • Default: null

Custom content width


height

  • Type: String
  • Default: null

Custom content height


skins

  • Type: [String, Array]
  • Default: null

Device skins: dark, inverted, noShadow, touch


Slots

default

Default slot where you should render your device's content