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
🚀 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 |