A Vue.js component library for displaying various device frames using the devices.css library. Ideal for showcasing responsive designs within different device mockups.
npm install vue-devicesA Vue.js component library for displaying various device frames using the devices.css library. Ideal for showcasing responsive designs within different device mockups.
To install the package, run:
``sh`
npm install vue-devices
js
// main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VueDevices from 'vue-devices'const app = createApp(App)
app.use(VueDevices)
app.mount('#app')
`$3
`vue
`
$3
#### VueDevice
| Prop | Type | Default | Description |
|----------------|---------------------------------------------------------------------------------------------------------|--------------|---------------------------------------------------------------------|
| device | 'apple-watch-s8' \| 'apple-watch-ultra' \| 'galaxy-s8' \| 'google-pixel-2-xl' \| 'google-pixel-6-pro' \| 'google-pixel' \| 'homepod' \| 'imac-pro' \| 'imac' \| 'ipad-pro-2017' \| 'ipad-pro' \| 'iphone-14-pro' \| 'iphone-14' \| 'iphone-8' \| 'iphone-x' \| 'the-iphone' \| 'macbook-pro-2018' \| 'macbook-pro' \| 'macbook' \| 'pro-display-xdr' \| 'surface-book' \| 'surface-pro-2017' \| 'surface-studio' | 'iphone-14' | The type of device frame to display. ||
| color | string | | The color of the device frame. |
| showStripe | boolean | true | Whether to show the stripe on the device frame. |
| showHeader | boolean | true | Whether to show the header on the device frame. |
| showSensors | boolean | true | Whether to show the sensors on the device frame. |
| showBtns | boolean | true | Whether to show the buttons on the device frame. |
| showPower | boolean | true | Whether to show the power button on the device frame. |
| showHome | boolean | true | Whether to show the home button on the device frame (if applicable).|
Example
`vue
My Responsive Design

``