Vue-push-notification-preview NPM

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

npm i vue-push-notification-preview

🚦 Quick Setup

Register globally

Make it available anywhere in your Vue application.

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);

Register locally

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

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

  export default {
    components: {
      AndroidPreview,
      IphonePreview
    },
    ...
};
</script>

👨🏻‍🏫 Documentation

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

Props

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.

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.

Events

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

Slots

All named slots for AndroidPreview and IphonePreview components:

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

Styling

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`