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

Question

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)/
                });
            }

        }
    }
};

Andrew Vasylchuk · Accepted Answer · 2019-07-24 16:31:28Z

2

This library has special build for SSR. Reference

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

Vue.use(VueAwesomeSwiper)

answered Jul 24, 2019 at 16:31

Andrew Vasylchuk

4,7792 gold badges14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Gregori Roberts Over a year ago

Ok, I changed the code of the file vue-awesome-swiper.js, as indicated by the link, but nothing has changed

Andrew Vasylchuk Over a year ago

Then you can remove this line of code in slider.vue: import { swiper, swiperSlide } from 'vue-awesome-swiper';

Andrew Vasylchuk Over a year ago

Remove it from components.

Gregori Roberts Over a year ago

if i delete components: { swiper, swiperSlide }, then my site have look : ibb.co/vQ9dJR5

Gregori Roberts Over a year ago

github.com/surmon-china/vue-awesome-swiper/blob/master/examples/…

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related