Nuxt Modules
The simplest way is to use Nuxt.js Modules, as it is tested and configured to work with Nuxt.js, and high chances of working in Universal render mode (server and client side render).
@nuxtjs/toast
npm install --save @nuxtjs/toastexport default { // .. modules: [ // .. '@nuxtjs/toast' ], toast: { position: 'top-center', duration: 3000 }, // ...}Usage
<template> <div> <button type="button" class="btn btn-primary" @click="showToast">Show Toast</button> </div></template><script>export default { methods: { showToast() { this.$toast.show('Hello from Toast') } }}</script>Vue.js Plugins
For other plugins, you need to check if there are compatible with Nuxt.js SSR.
vue-notification
npm install --save vue-notificationEdit nuxt.config.js
NOTE: This plugins require different configuration file for client and server side render.
export default { // .. plugins: [ { src: '~/plugins/vue-notification-client', mode: 'client' }, { src: '~/plugins/vue-notification-server', mode: 'server' } ], //...}Edit plugins/vue-notification-client.js
import Vue from 'vue'import Notifications from 'vue-notification'Vue.use(Notifications)Edit plugins/vue-notification-server.js
import Vue from 'vue'import Notifications from 'vue-notification/dist/ssr.js'Vue.use(Notifications)Edit layouts.default.vue
<template> <div> <notifications /> <!-- ... --> </div></template>Usage
<template> <div><button type="button" class="btn btn-primary" @click="showNotification">Show Notification</button> </div></template><script>export default { methods: { showNotification() { this.$notify({ // group: 'default', text: 'Hello!' }); } }}</script>