Nuxt.js used Swiper Animate

Ado, let's straight to the point.

1. First installed in vue used by Swiper npm i vue-awesome-swiper --save .
2. After the installation is complete, plugins create a new swiper.js file folder. js file as follows
   import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)
   
   , or [reference github → portal ]
3. Ready needed swiper.animate1.0.3.min.js files and animate.min.css file. → [ Portal ]
4. The swiper.animate1.0.3.min.js, animate.min.css file in the static folder, or assets folder can be, I personally put static folder, according to the file where you have placed in nuxt.config.js configuration css, followed plugins new folder animate.js file. PS :( personally think animate.js dependent on swiper.js , and therefore ended up without the use of plug-in head in the script tag form, it is dependent on the order in question). Closer to home, animate.js used in the file import '../static/js/swiper.animate1.0.3.min'mode is introduced animate, in nuxt.config.js plugins at the animate.js plug disposed swiper behind the plug. eg:
   
   
5. All preparations are configured end, see below, since nuxt use swiper need to use v-swiper:mySwiper="swiperOption"way. EG :
   
6. Requires the animate is required as follows, with reference to the program or the official website provides: [→ Portal ]
7. At last
8. Here, over, different animation effects can be selected according to the official website of the class name provided. [→ effect portal ]