CODEWITHSUNDEEP
vue.jsvuejs2nuxt.jsswiper.js
AlyssaAlex
AlyssaAlex

Reputation: 716

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: Dev Server Carousel

On production: Production Server Carousel

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!

Upvotes: 4

Views: 16951

Answers (4)

wriozumi
wriozumi

Reputation: 569

Here you can see refactoring for directives usage:

enter image description here

enter image description here

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

Upvotes: 0

nytro04
nytro04

Reputation: 101

Check out the documentation on the nuxt example page at

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

You will to add some few lines to nuxt.config.js

    export default {
  // some nuxt config...
  plugins: [
    { src: '@/plugins/nuxt-swiper-plugin.js', ssr: false },
  ],
  // some nuxt config...
  css: [
    // swiper style
    'swiper/css/swiper.css'
  ],
  // some nuxt config...
}

Upvotes: 0

ShomaEA
ShomaEA

Reputation: 91

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

Upvotes: 0

AlyssaAlex
AlyssaAlex

Reputation: 716

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.

Upvotes: 7

Related Questions