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.

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.

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