vue-push-notification-preview

A library for previewing push notification on devices.

🙋‍♂️ Features

- ✅ No dependencies
- Android Device Preview
- iOS Device Preview
- 🔥 Dark / Light mode notifications
- Customizable with SCSS variables

Package versions

- Vue.js v2 (install package v2)
- Vue.js v3 (install package v3)

🚀 Install

``sh
npm i vue-push-notification-preview
`

🚦 Quick Setup

$3

Make it available anywhere in your Vue application.

`js
import { AndroidPreview, IphonePreview } from 'vue-push-notification-preview';
import 'vue-push-notification-preview/src/assets/devices.scss';

Vue.component('AndroidPreview', AndroidPreview);
Vue.component('IphonePreview', IphonePreview);
`

$3

Explicitly register it to a component you want to use it in.

`vue

`

👨🏻‍🏫 Documentation

Visit: https://nenadjovanoski.github.io/vue-push-notification-preview/

$3

All props for AndroidPreview component:

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| textApplicationName | String | 'App name' | |
| textTime | String | '1h ago' | |
| textTitle | String | '' | |
| textBody | String | '' | |
| image | String | '' | URL for adding image to notification |
| appearanceMode | String | 'light' | 'light' and dark are possible options. |
| backgroundImage | String | '' | backgroundImage has lower priority over backgroundColor. |
| backgroundColor | String | '#c1c1c1' | backgroundColor has higher priority over backgroundImage. |
| height | Number | 644 and above (Recommended) | Device height in pixels. The width gets calculated to keep device's ratio. |
| isVisibleToggler | Boolean | false | A prop for managing when arrow toggler is visible in notification. |



All props for IphonePreview component:

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| textApplicationName | String | 'App name' | |
| textTime | String | '1h ago' | |
| textTitle | String | 'Title notification' | |
| textBody | String | '' | |
| image | String | '' | URL for adding image to notification |
| appearanceMode | String | 'light' | 'light' and dark are possible options. |
| backgroundImage | String | '' | backgroundImage has lower priority over backgroundColor. |
| backgroundColor | String | '#c1c1c1' | backgroundColor has higher priority over backgroundImage. |
| height | Number | 614 and above (Recommended) | Device height in pixels. The width gets calculated to keep device's ratio. |

$3

All custom events for AndroidPreview and IphonePreview components:

| Name | Trigger | Description |
| --- | --- | --- |
| toggle-notification (Android) | Click | Click on top right arrow of notification |
| toggle-notification (Iphone) | Click | Click on application icon of notification |




$3

All named slots for AndroidPreview and IphonePreview components:


| Name | Trigger | Description |
| --- | --- | --- |
| header | Click | Click on top right arrow of notification |




$3

Both AndroidPreview and IphonePreview components can be customized through SCSS variables, by importing the following files:

| Component | File path |
| --- | --- |
| AndroidPreview | vue-push-notification-preview/src/assets/devices/pixel_4.scss |
| IphonePreview | vue-push-notification-preview/src/assets/devices/iphone_x.scss` |