The nuxt.js framework supports Vue writing, so it is mainly divided into two directions
1. After using the cdn method, you can configure it in nuxt.config.js
2. Introduction through npm, this time mainly introduces the npm method
According to the swiper official website, the latest is swiper6 (the actual npm version may be above 7), but the execution
npm install --save swiperFinally, I found something that will prompt vue3 after running. Combined with the official website document of using swiper6 in vue , I can confirm:
swiper6 corresponds to vue3 syntax
Therefore, when nuxt.js introduces swiper6, you must confirm whether your nuxt supports vue3 syntax.
My project will prompt some warnings when running, so I choose to introduce a low version. The official recommendation for lower versions is vue-awesome-swiper.
There are a lot of messy writing on the Internet, here is a reminder: Be sure to check the version numbers of swiper and vue-awesome-swiper! ! !
1. The default installation of vue-awesome-swiper seems to be 4.x, which requires that swiper can only be a version below 6 (excluding swiper6), such as my local
When quoting, it is similar to the Internet, pay attention to css
The path of this css is related to the swiper version, which is also introduced in the warehouse of vue-awesome-swiper
If you still report an error or the css style does not come out after writing, then go to node_modules to see what level the swiper's css is in, and refer to it according to the actual level.
2. If you want to use a lower version, such as swiper2, swiper3, swiper4, you must choose the corresponding vue-awesome-swiper version, which is also written in other warehouses
The examples on the Internet are basically the usage of swiper+vue-awesome-swiper, but the relationship between these two versions is rarely clarified, so it is easy to become swiper6+, vue-awesome-swiper4+ when installing, and then you can’t find swiper , you still need to be vigilant.
My npm command is given below for reference
npm install [email protected] vue-awesome-swiper --saveIf you need a lower version of vue-awesome-swiper, you can also specify the version.
The specific usage will not be repeated, I believe that the official website of swiper can guide you to make carousel special effects