vue-awesome-swiper(swiperjs) on Nuxt js not working in production but works on dev

问题

I am using vue-awesome-swiper and have followed the steps here: https://github.com/surmon-china/vue-awesome-swiper. I have opted to register this plugin globally in Nuxt js.

PROBLEM: The Dev works perfectly fine, the slides are on each page and the navigation works. The production, on the other hand, has all the slides on page one, the navigation works here leaving the other pages blank as all slides are on the first page.

On dev:

On production:

These are my files:

plugins/VueAwesomeSwiper.js

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

// import style
import 'swiper/css/swiper.css';

Vue.use(VueAwesomeSwiper);

nuxt.config.js

...
css: [], <--- Do I need to add something to add here?
plugins: [
    { src: '~/plugins/VueAwesomeSwiper.js' },
  ]
...

TheSlider.vue

<template>
  <div>
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
        <swiper-slide>Slide 6</swiper-slide>
        <swiper-slide>Slide 7</swiper-slide>
        <swiper-slide>Slide 8</swiper-slide>
        <swiper-slide>Slide 9</swiper-slide>
        <swiper-slide>Slide 10</swiper-slide>
        <div slot="button-prev" class="swiper-button-prev"></div>
        <div slot="button-next" class="swiper-button-next"></div>
      </swiper>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class TheSlider extends Vue {
  swiperOption = {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  };
}
</script>

<style>

</style>

I am not sure what I am doing wrong. Could someone help? Thanks!

回答1:

I changed to:

<div v-swiper="swiperOption">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      Render original HTML in server, render Swiper in browser (client)
    </div>
  </div>
</div>

from https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-awesome-swiper/nuxt

and it worked.

回答2:

Check out swiper version, if you are using Swiper 6.0.0 or higher, import this css file:

plugins/VueAwesomeSwiper.js

import 'swiper/swiper-bundle.css'

if Swiper version is 5.* or lower import this file:
plugins/VueAwesomeSwiper.js

import 'swiper/css/swiper.css'

After installing, if pagination not working, downgrade your Swiper version to 5.*

Checkout this links:
https://github.com/surmon-china/vue-awesome-swiper
https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-awesome-swiper/nuxt

来源：https://stackoverflow.com/questions/61889192/vue-awesome-swiperswiperjs-on-nuxt-js-not-working-in-production-but-works-on-d

标签

Vue.js

vuejs2

nuxt.js

swiperjs