CODEWITHSUNDEEP
vue.jspluginsnuxt.js
Gregori Roberts
Gregori Roberts

Reputation: 309

error "window is not defined " when using plugin Vue.js

Just learning vue. Install the slider plugin for the site from here: https://github.com/surmon-china/vue-awesome-swiper . Transferred the code and received such an error: 'window is not defined' Code below. I use nuxt.js. There are several solutions on the Internet, but none of them helped me.

slider.vue 

<script>
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper';

  if (process.browser) {
    const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
    Vue.use(VueAwesomeSwiper)
  }

  export default {
    components: {
    swiper,
    swiperSlide
  },
    data() {
      return {
        swiperOption: {
          slidesPerView: 'auto',
          centeredSlides: true,
          spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        }
      }
    }
  }
</script>

vue-awesome-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper,{});

nuxt.config.js

module.exports = {
    /*
    ** Headers of the page
    */
    head: {
        title: 'stud-cit',
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: 'Stud-cit site' }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
    },

    loading: { color: 'blue'},
    plugins: [
        '~/plugins/vuetify',
        '~/plugins/vue-awesome-swiper' ,
        '~/plugins/vuePose'
    ],
    build: {
        vendor :['vue-awesome-swiper/dist/ssr'],
        extend (config, { isDev, isClient }) {
            if (isDev && isClient) {
                config.module.rules.push({
                    enforce: 'pre',
                    test: /\.(js|vue)$/,
                    loader: 'eslint-loader',
                    exclude: /(node_modules)/
                });
            }

        }
    }
};

Upvotes: 0

Views: 3364

Answers (1)

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

This library has special build for SSR. Reference

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

Vue.use(VueAwesomeSwiper)

Upvotes: 2

Related Questions