Display your app in a device sized window. Perfect for sharing with clients.
The window is ignored on mobile and tablet devices, including Chrome/Safari Developer Tools
https://normally.github.io/vue-device/
yarn add vue-device
import device from 'vue-device'
export default {
components: {
device
},
...
}
After that, wrap your app in the device tag:
<device>
<app/>
</device>
Property | Default | Description |
---|---|---|
type |
iPhone8 |
Can be any of the available devices |
background |
#FFF |
Background color |
landscape |
false |
Display the window in landscape mode |
picker |
false |
Show device picker above frame |
autoscale |
true |
Always fit the device in the browser window and scale the content |
border |
false |
Show a black border around the device |
disabled |
false |
Disable altogether just as a desktop view |
<device type='iPhone8' background='#444' autoscale='false' landscape picker border> ... </device>
- Nic Mulvaney - Normally