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:

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.

Global Registration

// 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')

Local Registration

<template>
  <VueDevice type="iphone-x" />
</template>

<script setup>
import { VueDevice } from 'vue-devices'
</script>

Component Props

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

<template>
  <div>
    <h1>My Responsive Design</h1>
    <VueDevice type="iphone-x">
      <img src="path-to-your-screenshot.png" alt="App Screenshot" />
    </VueDevice>
  </div>
</template>

<script setup>
import { VueDevice } from 'vue-devices'
</script>

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 - [email protected]

Links

Repository

Issues