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 |