CODEWITHSUNDEEP
vue.jsnuxt.js
drake035
drake035

Reputation: 2887

Can't add directive as plugin in Nuxt application

I'm trying to incorporate the Ripple package into my Nuxt application.

Following Nuxt docs and the package docs example I have a ripple.js file in plugins/ directory containing this:

import Vue from 'vue'
import Ripple from 'vue-ripple-directive'
Vue.directive('ripple', Ripple)

Then in nuxt.config.js I have:

plugins: [
  '~/plugins/ripple.js'
],

But now the app doesn't work at all, with some Unexpected token export error message on the screen, and a "Missing stack frames" error message in vm.js.

enter image description here

I have no idea what that means nor what I'm doing wrong, any suggestion?

Upvotes: 0

Views: 3123

Answers (1)

HMilbradt
HMilbradt

Reputation: 4639

This is due to an SSR error, where vue-ripple-directive cannot be used on the server. In order to get around this, you need to instruct Nuxt to only load the plugin on the client side.

To fix this, do the following 2 things:

First, rename ripple.js to ripple.client.js.

Second, update the plugins array to the following:

plugins: [
  '~/plugins/ripple.client.js'
]

The .client postfix signals to nuxt to only run the plugin on the client.

More information can be found here

Always keep this method in mind when adding Vue plugins, especially when they interact with the DOM in some way. Most that I've come across require this method to function without errors, as the DOM is unavailable on the server.

Upvotes: 1

Related Questions