Push Notification Preview Component For Vue

Install & Download:

# NPM
$ npm i vue-push-notification-preview

Description:

A Vue.js component for displaying iOS and Android push notification previews on your screen.

How to use it:

1. Import and register the component.

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

export default {
  components: {
    AndroidPreview,
    IphonePreview
  }
};

// Globally
Vue.component('AndroidPreview', AndroidPreview);
Vue.component('IphonePreview', IphonePreview);

2. Create push notification previews:

// iPhone
<iphone-preview
  text-body="Body"
  text-title="Title"
/>
// Android
<android-preview
  text-body="Body"
  text-title="Title"
/>

3. Available component props.

textApplicationName: {
  type: String,
  default: 'App name'
},
textTime: {
  type: String,
  default: '1h ago',
  validator: value => value.length < 8
},
textTitle: {
  type: String,
  default: 'Title notification'
},
textBody: {
  type: String,
  default: ''
},
height: {
  type: Number,
  default: DEVICE_SIZE.IPHONE_X_HEIGHT
},
isVisibleToggler: { // only for Android
  type: Boolean,
  default: false
}
image: {
  type: String,
  default: ''
},
backgroundImage: {
  type: String,
  default: ''
},
backgroundColor: {
  type: String,
  default: '#c1c1c1'
},
appearanceMode: {
  type: String,
  default: APPEARANCE_MODE.LIGHT,
  validator: value => Object.values(APPEARANCE_MODE).indexOf(value) !== -1
}