Vector devices mockups Includes:
- iphone
- ipad
- ipad-mini
- mac-browser
npm install vue-and-devices-mocks # OR yarn add vue-and-devices-mocks
- Import
device
component fromvue-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>
- Type:
String
- Default:
null
Device type: iphone
, ipad
, ipad-mini
, browser
- Type:
Number
- Default:
1
Scale number, from 1 to 30
- Type:
String
- Default:
null
Custom content width
- Type:
String
- Default:
null
Custom content height
- Type: [
String
,Array
] - Default:
null
Device skins: dark
, inverted
, noShadow
, touch
Default slot where you should render your device's content