vue-device

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

Demo

https://normally.github.io/vue-device/

Install

yarn add vue-device

Usage

import device from 'vue-device'
export default {
  components: {
    device
  },
  ...
}

After that, wrap your app in the device tag:

<device>
	<app/>
</device>

Options

| 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 |

Example:

<device type='iPhone8' background='#444' autoscale='false' landscape picker border> ... </device>

Authors

• Nic Mulvaney - Normally