Error: self is not defined , in nuxtjs ssr

[amraei]

Package version: 2.2.1 Nodejs version: 14.18.1 Vuejs version: 2.6.14 core-js version: 3.18.3

Implemented in Nuxtjs, I get this error:

<template>
  <date-picker />
</template>

<script>
import DatePicker from '@alireza-ab/vue-persian-datepicker';

export default {
  components: { DatePicker }
};
</script>

Error screenshot:

[alireza-ab]

Do not need to import the component into your pages. The components option in nuxt.confing.js should be true and just use the component. (https://alireza-ab.ir/datepicker/installation#nuxt)

<template>
  <date-picker />
</template>

<script>
// import DatePicker from '@alireza-ab/vue-persian-datepicker';

export default {
  // components: { DatePicker }
};
</script>

[amraei]

@alireza-ab This is not the case. I assume the window object is accessed using self which is not accessible on server side.

I just solved it this way:

<template>
  <no-ssr>
    <date-picker />
  </no-ssr>
</template>

<script>
export default {
  components: {
      DatePicker: () =>
            process.client ? import('@alireza-ab/vue-persian-datepicker') : null
  }
}

[alireza-ab]

Please check these steps:

1. Install with npm or yarn

   npm i @alireza-ab/vue-persian-datepicker
   # or
   yarn add @alireza-ab/vue-persian-datepicker

2. Add to the buildModules section of nuxt.confing.js

   buildModules: {
   '@alireza-ab/vue-persian-datepicker/nuxt'
   }

   If you are using Nuxt < v2.9, you have to use modules section in nuxt.config.js instead of buildModules.

3. The components option in nuxt.confing.js should be true.

With these steps, you can use the component without any problem, with fully supporting SSR.

[alireza-ab]

If you want to use the component without SSR support, just add a file like datepicker.js in the plugins folder with this content:

import Vue from 'vue'
import Datepicker from '@alireza-ab/vue-persian-datepicker'

Vue.component(Datepicker)

and add it to the plugins section of nuxt.config.js.