vue-push-notification-preview

A library to preview the push notifications on iOS and Android devices
9,860 13
vue vuejs notification preview push ios android iphone device
Install
npm install vue-push-notification-preview
Latest Version:3.0.0
Vue:3
Older releases:2
License:MIT
Last Updated:Jun 9, 2024
Links: GitHub  ·  npm
Maintainer: nenadjovanoski

vue-push-notification-preview

A library for previewing push notification on devices.

vue-push-notification-preview main example

🙋‍♂️ 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

Related Packages

@nativescript-community/ui-checkbox

Checkbox: Material 3 MaterialCheckBox on Android, SF Symbols toggle button on iO...

7,082 1
android ios javascript nativescript
@onesignal/onesignal-vue3

Vue 3 OneSignal Plugin: Make it easy to integrate OneSignal with your Vue App!

290,239 19
notification push vue onesignal push notification
@nativescript-community/perms

An unified permissions API for NativeScript on iOS and Android.

171,921 15
android ios vue javascript nativescript
onesignal-vue

Vue OneSignal Plugin: Make it easy to integrate OneSignal with your Vue App!

68,591 11
notification push vue onesignal push notification
@nativescript-community/ui-canvas

Implement Canvas into your NativeScript apps.

45,311 38
android ios vue javascript nativescript

Version History

Version Released Vue License
3.0.0 ^3.4.21 MIT
2.3.1 ^2.6.x MIT
2.3.0 ^2.6.x MIT
2.2.0 ^2.6.x MIT
2.1.1 ^2.6.x MIT