Vue-awesome-swiper: Slides not shown properly in build environment

[Bobur-kobilov]

I am using "nuxt": "^2.0.0", "vue-awesome-swiper": "^3.1.3", and "vue-material": "^1.0.0-beta-10.2". It is working fine in dev environment but slides not shown properly in build environment.

I made awesome-swiper.js in plugins folder and declared the following:
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

I made the following configuration in nuxt.config.js file:
{ src: '~/plugins/awesome-swiper',ssr: false}

Any help would be highly appreciated!

[OleksiiBrylin]

I have the same issue. Have you found solution? (the width is static and breakpoints don't work)

[emreacar]

EDIT: There is option for updating on resize; use resizeReInit:true option for using breakpoints it's work great.

OLD ANSWER
Same Issue, I applied a temporary solution

mounted () {
  window.addEventListener('resize', this.updateSlider)
},
methods: {
    updateSlider () {
      this.mySwiper.params.slidesPerView = this.swiperSettings.slidesPerView
      // Breakpoints here
      if (window.innerWidth <= 480) {
        this.mySwiper.params.slidesPerView = '2'
      }
      this.mySwiper.update()
    }
  }

[tanvir93]

I fault into same problem. Finally, I saw the problem was coming from CSS purge.

So, instead of adding its css in nuxt.config.js, I added in my style.scss and tell nuxt not purge it as followings:

/! purgecss start ignore */
.....
@import 'swiper/dist/css/swiper.css';
.....
/! purgecss end ignore */

And fixed!

[jonathanmach]

Hi everyone,
I also was facing problems with purge CSS, solved it by adding the following to my nuxt.config.js:

  purgeCSS: {
    whitelistPatternsChildren: [/swiper/]
  }

[Pijuli]

Hi everyone,
I also was facing problems with purge CSS, solved it by adding the following to my nuxt.config.js:

  purgeCSS: {
    whitelistPatternsChildren: [/swiper/]
  }

THAT'S the way. I've lost hours. Thank you!