❤
npm
Sign UpSign In

vue-easy-notify

1.1.3 • Public • Published

Vue-Easy-Notify

Introduction

Vue Notify is very minimal and simple to use plugin available for VueJs, It comes with mixin that you can use to easily integrated your server-service notifications with vue-easy-notify.

Demo

CodePen

Quick Start

NPM

Install the package:

npm install vue-easy-notify

Register the plugin:

import Vue from 'vue'
import NotifyPlugin from 'vue-easy-notify'
import 'vue-easy-notify/dist/vue-easy-notify.css' // import style
 
Vue.use(NotifyPlugin)

Use the component:

<notifications></notifications>
// you can call like this in your component
this.$notifyInfo("This is info message.")
 
// and also 
Vue.prototype.$notifyInfo("Another info message.")

Great Now you have this cool vue-easy-notify installed on your project..

Examples
<notifications position="bottom"></notifications>
// notify by notification type
this.$notify({
  message: 'Example message.',
  type: 'info' // success, warning, error
})
 
// notify with timeout
this.
({
  message: 'Example message.',
  type: 'success',
  timeout: 3000
})
 
// shorthand methods
this.$notifyInfo('This is info messsage.');
this.$notifySuccess('This is success messsage.');
this.$notifyWarning('This is warning messsage!');
this.$notifyError('This is error messsage!');

Server Side Usage

Below is the example how you can use vue-easy-notify to handle laravel server side flash message and errors.

Install laracasts/flash composer package.

composer require laracasts/flash
// ExampleController
// ... //
public function index()
{
  flash()->info('server side flash message.');
  
  return redirect('/home');
}
// ... //
<!-- layouts/app.blade.php -->
<head>
  <!-- -->
  <script type="text/javascript">
        var flash_notification = {!! (session()->has('flash_notification')) ? json_encode(session()->get('flash_notification')) : 'false' !!}
  </script> 
 
  {{ session()->forget('flash_notification') }}
  <!-- -->
</head>
<body>
  <!-- -->
  <notifications :messages="{{ collect($errors->all())->map(fn($error) => ['message' => $error, 'type' => 'error']) }}"
                 position="bottom"
  >
  </notifications>
  <!-- -->
</body>

add and use this plugin in your project to check laravel notifications

// resources/js/mixins/notifications.js
export default {
    mounted() {
        this.checkNotify();
    },
 
    methods: {
        checkNotify() {
            if (!flash_notification) {
                return;
            }
 
            flash_notification.forEach(notification => {
                let type = notification.level;
 
                if (type === 'danger') {
                    type = 'error';
                }
 
                this.$notify({
                    message: notification.message,
                    timeout: 5000,
                    type
                })
            })
        }
    }
}
 
// resources/js/app.js
 
import Vue from 'vue'
import NotifyPlugin from 'vue-easy-notify'
import NotifyMixin from './mixins/notifications.js'; // this mixin will automatically check server side notfications.
Vue.use(NotifyPlugin)
 
new Vue({
  el: '#app',
  mixins: [NotifyMixin],
  mounted() {
    this.$notifyInfo('show message from client side.')
  }
})

API

Options

below are the options you can pass to notify function.

Option Type's Default Description
message String '' Notification message content
type String 'info' Notification level
['info', 'success', 'warning', 'error']
size String 'sm' Notification size
['sm', 'lg']
timeout Number 5000 Display time of the notification in millisecond
showClose Boolean true Show close icon on notification
[true, flase]

Readme

Keywords

Package Sidebar

Install

npm i vue-easy-notify

Repository

github.com/AhmadWaleed/vue-notify

Homepage

github.com/AhmadWaleed/vue-notify#readme

Weekly Downloads

48

Version

1.1.3

License

MIT

Unpacked Size

1.35 MB

Total Files

23

Last publish

Collaborators

  • ahmedwaleed
Try on RunKit
Report malware