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

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

@nuxtjs/toast

npm install --save @nuxtjs/toast
export 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-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>

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>
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.