Nuxt.js: When importing a plugin on client side, mode: 'client' and ssr: 'false' aren't working

[stirredo]

Version

v2.8.1

Reproduction link

https://jsfiddle.net

Steps to reproduce

1. Create a plugin in plugins directory as VueApexCharts.js
   In that file:

import Vue from 'vue'
import VueApexCharts from 'vue-apexcharts'

Vue.use(VueApexCharts)

1. In your nuxt.config.js file:

plugins: [
    { src: '~/plugins/VueApexChart.client.js', mode:  'client' },
  ],

Or Try:

plugins: [
    { src: '~/plugins/VueApexChart.js', ssr:  false },
  ],

Or Try:
plugins: [
{ src: '~/plugins/VueApexChart.client.js'},
],

None of the methods for disabling ssr for a plugin mentioned in the documentation is working.

When you try to use

What is expected ?

The plugin should be able to render only on client-side.

What is actually happening?

It is being rendered on server side as I get the error:

Cannot read property 'document' of undefined

The exact stack trace:
node_modules/apexcharts/dist/apexcharts.common.js

Additional comments?

I need to use the plugin vue-apexcharts and I cannot disable ssr on it.

_{This bug report is available on Nuxt community (#c9514)}

[pimlie]

Thanks for the report. Please create a minimal reproduction on codesandbox that we can easily check.

[Atinux]

Please re-open with a repro (https://template.nuxtjs.org)

[mateuszgachowski]

same problem here @Atinux

please see: https://codesandbox.io/s/codesandbox-nuxt-3gndu (it hangs the browser sometimes)

[mateuszgachowski]

For anybody trying to avoid this error on SSR:

components: {
    vueApexCharts: () =>
    process.client ? import('vue-apexcharts') : Promise.resolve({ render: (h: any) => h('div') }),
},

[davoodmood]

thanks, this solution worked for me. I'm glad with the result.

[developerKumar]

For anybody trying to avoid this error on SSR:

components: {
    vueApexCharts: () =>
    process.client ? import('vue-apexcharts') : Promise.resolve({ render: (h: any) => h('div') }),
},

Thanks

[jasonbrookins]

Is this issue still active? Or has it gotten an 'official' resolution yet? I'm getting a document is not defined error despite marking the plugin as client-side only:

plugins: [
    { src: '~/plugins/vue-password-strength-meter', mode: 'client', ssr: false }
  ]

The Nuxt error is:

Error in beforeCreate hook: "ReferenceError: document is not defined" 

(note: redundancy with ssr: false was for testing)

[Atinux]

What is the content of your plugin?

[jasonbrookins]

~/plugins/vue-password-strength-meter.client.js

(from https://www.npmjs.com/package/vue-password-strength-meter)

import Vue from 'vue'
import VuePasswordStrengthMeter from 'vue-password-strength-meter'

if (process.client) {
  Vue.use(VuePasswordStrengthMeter)
}

nuxt.config.js

plugins: [
    { src: '~/plugins/vue-password-strength-meter.client.js', mode: 'client' }
]

.vue page

(trying to use the hint from developerKumar above)

components: {
    Password: () =>
      process.client
        ? import('vue-password-strength-meter')
        : Promise.resolve({ render: h => h('div') })
  }

[Atinux]

@jasonbrookins actually you can directly wrap the Password component with <client-only>:

```vue

````

Online demo: https://codesandbox.io/s/silent-dew-vm0fs

[jasonbrookins]

@jasonbrookins actually you can directly wrap the Password component with <client-only>:

<template>
  <div>
    <client-only>
      <password v-model="password"/>
    </client-only>
  </div>
</template>

<script>
import Password from "vue-password-strength-meter";

export default {
  components: {
    Password
  },
  data: () => ({
    password: ""
  })
};
</script>

Online demo: https://codesandbox.io/s/silent-dew-vm0fs

Thanks, Sébastien!