Use plugin only on browser side with Nuxt Js

[joaomarcelofm]

I'm not sure if you have tried using this module with Nuxt Js but I'm having some issues with the set up.

To start I created a plugin file with the following settings:
vue-smooth-height.js

import Vue from 'vue'
import smoothHeight from 'vue-smooth-height'
if (process.browser) {
  Vue.use(smoothHeight)
}

Then in thenuxt.config.js:

plugins: [
    { src: '~/plugins/vue-smooth-height', ssr: false },
  ],
  build: {
    vendor: ['vue-smooth-height']
}

Both of these step were to make the plugin only on the browser and not in the server.

The issue is that some of the settings for the vue-smooth-height module keep trying to be loaded on the server:

in my component:

mixins:[smoothHeight],
    mounted(){
        this.$smoothElement({
            el: this.$refs.container,
        })
    },

For mixins it says that smoothHeight is not defined and for the functions, this.$smoothElement is not a function.

Is there a way to have those settings only be triggered on the browser?

[guanzo]

Hey joaomarcelofm,

I actually started using Nuxt for the first time this week, but I haven't tested it with vue-smooth-height.

vue-smooth-height is technically a mixin, and not a plugin. That is, it doesn't expose an install function, which is required for Vue.use. So Vue.use(smoothHeight) doesn't do anything. The docs explain it here: https://vuejs.org/v2/guide/plugins.html

I will investigate how to integrate this mixin with Nuxt and get back to you.

[joaomarcelofm]

Hey guanzo,
Thanks for getting back to me so quickly and also congrats for the great feature you built, looks super neat 👍 !

I see, I hadn't realised how that would differ 🤔

I managed to use it with Nuxt by copying the whole index.js file into a plugin file in my project, converting the mixin variable into a global mixin, and removing the mixin:[smoothHeight] from the component instance.
Maybe it's not the most sophisticated way to solve it for general use.