DEV Community 👩‍💻👨‍💻

John Doe
John Doe

Posted on

SwiperJs with Nuxtjs v2

Image description
Welcome everyone! Today I wanna talk about Sliders in Nuxt JS.

While making a website on NuxtJs I found it a bit complicated to make Swiper Js work with it.
Of course, there is a plugin called vue-awesome-swiper, but actually it is outdated and works good with Swiper v3-5 only.

But what if you want to use Swiper v6?

I found an easy and working the solution! It's actually was written on official website....
Ok -_-

Simply install swiper v6 with

npm i swiper@6

or yarn, import it into the project and init it in mounted lifecycle hook as written in official docs here. The manual is now for v7 but it actually works.

For those who still have some problems with it you can find a full code on my github page

Unfortunately, you cannot do that with Swiper v7, due to old webpack in Nuxt.
Hope Nuxt3 will become working for production and we will be ready to use Swiper with it....
soon.

Ps. The post image was found in Google Search by keyword sliders hahaha

Top comments (0)

12 Rarely Used Javascript APIs You Need

>> Check out this classic DEV post <<