Nuxt.js Install Vue.js Plugins (Universal SSR usage)

Feb 14, 2020
@nuxtjs/toast, vue-notification

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).


npm install --save @nuxtjs/toast
export default {  // ..  modules: [    // ..    '@nuxtjs/toast'  ],  toast: {    position: 'top-center',    duration: 3000  },  // ...}


<template>  <div>    <button type="button" class="btn btn-primary" @click="showToast">Show Toast</button>  </div></template><script>export default {  methods: {    showToast() {      this.$'Hello from Toast')    }  }}</script>

Vue.js Plugins

For other plugins, you need to check if there are compatible with Nuxt.js SSR.


npm install --save vue-notification

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


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

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.