vue-devices

A Vue.js component library for displaying various device frames using the devices.css library. Ideal for showcasing responsive designs within different device mockups.

Installation

To install the package, run:

``sh
npm install vue-devices
`

Usage

First, import and register the VueDevice component in your Vue application. You can do this globally in your main file or locally in individual components.

$3

`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



``

Contributing

Contributions are welcome! Please feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Author

Marius Mikelsen - marius.mikelsen@gmail.com

Links

Repository

Issues