# vue-device

> Display your app in a device sized window.

Latest version **0.5.5** (published 2018-02-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-device
pnpm add vue-device
yarn add vue-device
bun add vue-device
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.5 |
| Published | 2018-02-08 |
| First published | 2017-11-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 439.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Normally |
| Maintainers | mulhoon |
| Keywords | vue, device, frame, chrome, mobile, tablet |

## Links

- npm: https://www.npmjs.com/package/vue-device
- Repository: https://github.com/Normally/vue-device
- Homepage: https://github.com/Normally/vue-device#readme
- Issues: https://github.com/Normally/vue-device/issues
- npm.io page: https://npm.io/package/vue-device

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 0.5.5 (latest) — 2018-02-08
- 0.5.4 — 2018-02-08
- 0.5.3 — 2018-01-17
- 0.5.2 — 2017-11-07
- 0.5.0 — 2017-11-06

## README

# vue-device

[![npm](https://img.shields.io/npm/v/vue-device.svg) ![npm](https://img.shields.io/npm/dm/vue-device.svg)](https://www.npmjs.com/package/vue-device)
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

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

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

After that, wrap your app in the device tag:

```html
<device>
	<app/>
</device>
```

## Options

| Property     | Default   | Description                                                       |
| :----------- | :-------- | :---------------------------------------------------------------- |
| `type`       | `iPhone8` | Can be any of the [available devices](DEVICES.md)                 |
| `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:

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

## Authors

* Nic Mulvaney - [Normally](http://normally.com)

---
_Source: https://npm.io/package/vue-device · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._