[Vuejs]-Can't add directive as plugin in Nuxt application

by

1👍

✅

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.

👤HMilbradt

Leave a comment