Installation hassles

The Swiper plugin is very powerful and can help us achieve a lot of cool effects. But it is now the version is very many, I believe there are many partners, will be like me according to the document to install import, but found error, not swiper can not find, is CSS style can not find, such as the problem, and then thrash for a long time, and then have not installed successfully, laugh HHH. So this article documents the process of using swiper for NUxT2 (NUxT version 2.14.5).

A brief description of the version of swiper

The main reason why we failed in the installation process is probably the version problem, for example, you see the document version is different from the version you installed, and then the installation is not successful. Swiper3, swiper4,swiper5 version plugin is mainly vue-awesome-swiper, here is the gitbub address repository also named vue-awesome-swiper, but this also has different versions, installation introduction is also different, this is one of the pit. The github address is swiper and the repository name is swiper. Next, I will replay my swiper4 and swiper5 versions.

Nuxt is installed using the Swiper4 plug-in

Step 1: Install vue-awes-swiper3.1.3

   npm install vue-awesome-swiper@3.13.
Copy the code

Note: vue-awesome-swiper3.1.3 although is 3. Many versions, but just swiper4 hahaha

Step 2: Register the plug-in

Create the plugins folder in the SRC directory of your project, and create a new js file (name can be customized), such as plugins/swiper.js, and write the following content to it.

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)
Copy the code

Step 3: Configure swiper.js in the nuxt.config.js file

module.exports = {
  plugins: ['~/plugins/swiper.js']}Copy the code

Step 4: Use the Swiper Directive API(VUE directive)

Note: If it is a general vUE single page project, we can import the swiper component for use, but in nuxt SSR project, the problem of Window is not defined will be reported, so we need to use swiper provided for SSR command on the page.

<template>
  <div v-swiper:mySwiper="swiperOption">
    <div class="swiper-wrapper">
      <div class="swiper-slide" :key="banner" v-for="banner in banners">
        <img :src="banner">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        banners: [ '/1.jpg'.'/2.jpg'.'/3.jpg'].swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          // ...}}},mounted() {
      console.log('Current Swiper instance object'.this.mySwiper)
      this.mySwiper.slideTo(3.1000.false)}}</script>
Copy the code

If successful, the page will be displayed

Nuxt is installed using the plug-in Swiper5

Step 1: Install vue-awes-swiper 4.1.1 [email protected]

   npm install vue-awesome-swiper@4.14.
   npm install swiper@5.4
Copy the code

Note: You need to install another swiper, otherwise you will report CSS style file cannot find the error,swiper5.4 test available, vUE -awesome- Swiper 4.1.1 version although 4. A lot, but it’s the swiper5.

Step 2: Register the plug-in

Create the plugins folder in the SRC directory of your project, and create a new js file (name can be customized), such as plugins/swiper.js, and write the following content to it.

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'  // You can see that the import path is different from the previous version
import 'swiper/css/swiper.css'   // You can see that the import path is different from the previous version

Vue.use(VueAwesomeSwiper)
Copy the code

Step 3: Configure swiper.js in the nuxt.config.js file

module.exports = {
  plugins: ['~/plugins/swiper.js']}Copy the code

Step 4: Use the Swiper Directive API(VUE directive)

Note: If it is a general vUE single page project, we can import the swiper component for use, but in nuxt SSR project, the problem of Window is not defined will be reported, so we need to use swiper provided for SSR command on the page.

<template>
  <div v-swiper:mySwiper="swiperOption">
    <div class="swiper-wrapper">
      <div class="swiper-slide" :key="banner" v-for="banner in banners">
        <img :src="banner">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        banners: [ '/1.jpg'.'/2.jpg'.'/3.jpg'].swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          // ...}}},mounted() {
      console.log('Current Swiper instance object'.this.mySwiper)
      this.mySwiper.slideTo(3.1000.false)}}</script>
Copy the code

If successful, the page will be displayed

generalizations

Problem analysis

While installing the Swiper plugin failed, I thought about the possible reasons for my failure:

  1. Version issues (the installed version is different from the version of the document you are viewing)
  2. Configuration issues (not configured or misconfigured for the nuxT import plug-in)
  3. Nuxt should use swiper instead of the usual way of importing components.

Ha ha ha ha ha ha pit above all step on, read the blog many times, still can’t install successfully, finally found in the official document, so carefully read the corresponding version of the official document is very important ~.

To summarize

I have successfully used the above installation method, we should be able to install according to the above two versions of the installation method of either. If you fail to install swiper or want to install a later version of swiper, you are advised to check the github documentation to focus on the corresponding version of Swiper. Different versions of Swiper have different paths, number of files, and methods to import files.