web-dev-qa-db-fra.com

Vue-Awesome-Swiper (Swiperjs) sur NUXT JS ne fonctionne pas dans la production mais fonctionne sur Dev

J'utilise Vue-Awesome-Swiper et j'ai suivi les étapes ici: https://github.com/surmon-china/vue-awesome-swiper . J'ai choisi d'enregistrer ce plugin globalement dans NUXT JS.

[~ # ~] problème [~ # ~] : Le développement fonctionne parfaitement bien, les diapositives sont sur chaque page et la navigation fonctionne. La production, d'autre part, dispose de toutes les diapositives de la page une, la navigation fonctionne ici, laissant ici les autres pages vides car toutes les diapositives sont sur la première page.

Sur Dev: Dev Server Carousel

Sur la production : Production Server Carousel

Ce sont mes fichiers:

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>

Je ne suis pas sûr de ce que je fais mal. Quelqu'un pourrait-il aider? Merci!

vue.jsvuejs2nuxt.jsswiperjs
3
AlyssaAlex

J'ai changé en:

<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>

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

et ça a fonctionné.

4
AlyssaAlex

Consultez la documentation sur la page Exemple de NUXT à

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

Vous allez ajouter quelques lignes à 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...
}
0
nytro04