document is not defined

[gomezmark]

I'm trying to use this on Nuxt.js But Im having document is not defined.

import Vue from 'vue';
import {DateRange} from 'vue-date-range';

Vue.use(DateRange);

nuxt.config.js

 { src : '~/plugins/vue-date-range', ssr : false},

Thanks!

[ParadeTo]

Can you give a full code?

[gomezmark]

@ParadeTo

plugins/vue-date-range.js

import Vue from 'vue';
import DateRange from 'vue-date-range';

Vue.use(DateRange);

nuxt.config.js

plugins : [ { src : '~/plugins/vue-date-range', ssr : false} ]

index.vue

<template>
 <div>
  <date-range  class="calendar" v-model="range" :lang="lang" @change="onChange"></date-range>
 </div>
</template>

<script>
 export default {
    data() {
     range: {
          startDate: Vue.moment(),
          endDate: Vue.moment().add(7, 'days')
        },
     lang : "en",
   },
  methods : {
    onChange(range) {
        this.range = range;
      },
      setRange (p) {
        if (typeof p === 'number') {
          console.log(p)
          this.range = {
            startDate: moment().add(p, 'days'),
            endDate: moment()
          }
        }
      }
  }
</script>

Thanks for the reply Sir

[ParadeTo]

Can you give a repository so that I can run it in my computer directly?

[ParadeTo]

I am afraid it is your project's problem, not the vue-date-range.

[ghost]

Had the same problem, but importing plugin globally with no-ssr helped. Maybe try wrapping this <date-range class="calendar" v-model="range" :lang="lang" @change="onChange"></date-range> with<no-ssr> To author: please try running the component in nuxt project.

[gomezmark]

@Profispojka

I set the config to ssr : false? is that correct?

[gomezmark]

@ParadeTo

I'm trying to figure out I'm looking a work around. I let you know if it worked.

Thanks

[ParadeTo]

@Profispojka @gomezmark Sorry, I have not used nuxt before. Hope you can help to solve the problem.