CODEWITHSUNDEEP
vue.jsnuxt.js
Evan
Evan

Reputation: 2507

nuxt with vue-dragscroll: window is not defined

I am trying to use vue-dragscroll with nuxtjs.

I am new to nuxtjs and I have been using vue-dragscroll before with regular vuejs.

I have been shown an error Window is not defined, I've looked at the vue-dragscroll documentation and I still couldn't find the solution.

enter image description here

This is how I implemented the vue-dragscroll

<template lang="pug">
  div
    CountriesSearch.mb-2
    div#countryList(v-for="country in countries" :key="country.country" v-dragscroll)
      CountryItem(:country="country" v-if="country.Country")
</template>

<script>
import { dragscroll } from 'vue-dragscroll'

export default {
  directives: {
    dragscroll
  },

Upvotes: 1

Views: 1673

Answers (1)

Ohgodwhy
Ohgodwhy

Reputation: 50797

You will have to declare it as a directive within a plugin file.

// plugins/vue-dragscroll.js
import Vue from 'vue'
import { dragscroll } from 'vue-dragscroll'

Vue.directive('dragscroll', dragscroll)

Then, in your nuxt.config.js add that plugin file to your plugins: [] array:

{ src: '@/plugins/vue-dragscroll.js', ssr: false }

This directive leverages the window which is unavailable during SSR, hence your error.

Upvotes: 4

Related Questions