Vue-awesome-swiper: Window undefined with Nuxt 1.0.0

[rizkiheryandi]

Version

Nuxt : 1.0.0
Vue : 2.5.13
Swiper : 3.1.2

Steps to reproduce

• Use vue-awesome-swiper with nuxt SSR installation from repository

What is Expected?

• Running in Nuxt

What is actually happening?

• Window is not defined

[surmon-china]

https://github.com/surmon-china/vue-awesome-swiper#mount-with-ssr

// If used in nuxt.js/ssr, you should keep it only in browser build environment
if (process.browser) {
  const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
  Vue.use(VueAwesomeSwiper)
}

[bovas85]

It's actually const VueAwesomeSwiper = require('vue-awesome-swiper/ssr') now as per docs

[surmon-china]

@bovas85 The docs has been updated after v3.0.0.

[bovas85]

Ah yes, I noticed now. This was recent right? @surmon-china
Thanks.

[haryzxw]

@surmon-china 加了process.browser的判断，但是在组件引用import { swiper, swiperSlide } from 'vue-awesome-swiper/dist/ssr' 还是抛了window is not defined的错。是我的引入方式不对吗？

[bovas85]

english please

[zhaoxiaoer888]

@haryzxw 你的window is not defined 解决了么？我也刚遇到这个问题

[haryzxw]

@zhaoxiaoer888 嗯 解决了 当时也是参考了别人的解决方法 写法变了一下

[CorgiTT]

@zhaoxiaoer888 嗯 解决了 当时也是参考了别人的解决方法 写法变了一下

怎么解决的？

[paragonHex]

I had a <no-ssr> as parent in the template. Removing that solved this for me on nuxt 2.0.
(It would worth adding a comment to the example, to omit that.)

Edit: then I figured that it is needed if you (most probably) have bindings of data available on the server side. To solve this, add a wrapper div between <no-ssr> and the div with the v-swiper:mySwiper directive on.

[mrKorg]

@paragonHex can you show exapmle. I have the same problem, but I can not solved it

[surmon-china]

• Upgrade to v4.x
• Read SSR document please.