simple-vue-notifications
INSTALL & SETUP
npm i --save simple-vue-notifications
import into main.js:
import Notifications from 'simple-vue-notifications
Vue.use(Notifications, { global: true || false });
specifying global as true or false determines whether you want a global component or whether you want to simply import it locally.
You should be able to import the notifications container component locally:
import NotificationContainer from 'simple-vue-notifications/src/components/notifications';
add the following code to your App.vue (or where ever you want it)
<app-notifications :duration></app-notifications>
create an array in your root vue instance:
data: { notes: [] }
TO USE
Example:
this.$notification.addNotification('This is a success, 'success');
this.$notification.addNotification('This is an error, 'error');
this.$notification.addNotification('This is info, 'info');
this.$notification.addNotification('This is an warning, 'warning');
The following will not work:
this.$notification.addNotification('<strong>Hello world</strong>', 'success');
Unless you pass an object with the property of htmlSafe: true like so.
this.$notification.addNotification('<strong>Hello world</strong>', 'success', { htmlSafe: true })
htmlSafe will default to false.
You can reposition the notification-container by passing a prop with the name :position to the component and one of the following strings:
top-right
top-left
top-center
bottom-center
Animations & Icons
Drop in font-awesome and/or animate.css