Nuxt project requires vue-awesome-swiper. I found a lot of articles on the Internet.

Step 1 Install swiper

npm install swiper vue-awesome-swiper –save

The version I installed is as follows

"Nuxt" : "^ 2.15.3," "swiper" : "^ 6.7.0", "vue - awesome - swiper" : "^ 4.4.1."Copy the code

Step 2 Register swiper

Method 1 Global Registration

First of all,pluginsAdding a file to a directoryswiper.js:

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper.min.css'
Vue.use(VueAwesomeSwiper)
Copy the code

Note: The official website says import ‘swiper/ CSS /swiper.css’, but I would say ‘Module not found’. After checking the installation directory of the component, Swiper /swiper.min. CSS ‘or ‘swiper/swiper.css’

Then, in thenuxt.config.jsIn the configuration:

plugins: [
    '~/plugins/element-ui',
    { src: "~/plugins/swiper.js", ssr: false }
],
Copy the code

/plugins/swiper.js /swiper.js /swiper.js /swiper.js /swiper.js /swiper.js /swiper.js /swiper.js /swiper.js /swiper.js

Method 2 Local Registration

If swiper is used in label modeStep 3- Method 1)

Add the following code to the component:

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper.css'
 
export default {
  components: {
    Swiper,
    SwiperSlide
  }
}
Copy the code

Note: the first letter of Swiper and SwiperSlide should be uppercase. I wrote the first letter of Swiper and SwiperSlide in uppercase, which will cause an error when using step 3- method 1:

[Vue warn]: Unknown custom element: <swiper> – did you register the component correctly? For recursive components, make sure to provide the “name” option.

If swiper is used in command modeStep 3- Method 2)

Add the following code to the component:

import { directive } from 'vue-awesome-swiper'
import 'swiper/swiper.css'
 
export default {
  directives: {
    swiper: directive
  }
}
Copy the code

Note: If you do not have the above registration code, an error will be reported when using step 3- mode 2:

[Vue warn]: Failed to resolve directive: swiper

Step 3 Use swiper

Mode 1 Use<swiper>Label pattern

<client-only>
    <swiper :options="swiperOption">
        <div class="swiper-wrapper">
          <swiper-slide v-for="(item, ind) in prodData.indexImages" :key="'indexImg' + ind">
            <img :src="item">
          </swiper-slide>
        </div>
    </swiper>
</client-only>
Copy the code

Note:

  • <client-only>If yes, this will cause an error:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Method 2 can also be useddirectiveMode:

<client-only>
<div v-swiper:swiper="swiperOption">
    <div class="swiper-wrapper">
      <div v-for="(item, ind) in prodData.indexImages" :key="'indexImg' + ind" class="swiper-slide">
        <img :src="item">
      </div>
    </div>
</div>
</client-only>
Copy the code

The directive mode is officially recommended for SSR. Vue-awesome-swiper has a client render swiper with a built-in directive. The main benefit of Directive is that HTML can still render web pages on the server side and output them so that search engines can properly capture the target content.

And don’t forget:

<script>
export default {
    data () {
        return {
            swiperOption: {
                direction: 'vertical'.slidesPerView: 4.spaceBetween: 8.navigation: {
                  nextEl: '.button-next'.prevEl: '.button-prev'
                }
            }
        }
    }
}
Copy the code

navigation not working

Swiper shows no problem, manual drag can also scroll, but click navigation does not respond (of course I have HTML<div class="button-prev">and<div class="button-next">Swiper = 5; swiper = 5; swiper = 5; swiper = 5; swiper = 5import 'swiper/css/swiper.min.css').Refer to the article