<template><Swiper :slides-per-view="2" :loop="true" :modules="[Navigation]" :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }"><SwiperSlide v-for="item in items" :key="item.id"> {{ item.name }} </SwiperSlide></Swiper><divclass="swiper-button-prev"><img loading="lazy"src="/images/items/left_arrow.svg" /></div><divclass="swiper-button-next"><img loading="lazy"src="/images/items/right_arrow.svg" /></div></template><script setup lang="ts">import { ref } from'vue';import { Swiper, SwiperSlide } from'swiper/vue';import'swiper/css';constitems=ref([{id:1,name:'name1'},{id:2,name:'name2'},{id:3,name:'name3'}]);</script>
hou to use
npm i nuxt-swiper
or
npm i swiper
add module in nuxt.config.ts
// nuxt.config.ts
import { defineNuxtModule } from 'nuxt'
export default defineNuxtConfig({
modules: ['nuxt-swiper']
})reference