nuxt3でswiperを使ってカルーセル（スライダー）を作る

2023年11月20日2023年11月30日

運営者：そうすけ

30代のブロガーとエンジニア。
工場勤務→情シス→ソフトウェアエンジニア
主にフロントエンド開発を行っています。

趣味はガジェットと植物。

nuxt3で外部モジュールでカルーセルを実装するのに苦労したので記載します。

背景

Nuxt.jsでスライダーを使用する方法を検索すると、vue-awesome-swiper、Swiper Vue.js Componentsの使用手順が多く紹介されています。

しかし、使用が非推奨(deprecated)となっており、最終的にはSwiper Elementの使用を推奨と促されます。

本記事では、Swiper ElementをNuxt3で使用する手順を簡単にまとめています。

手順

インストール

npm install swiper

nuxt.config.jsに記載

export default defineNuxtConfig({
  ...,
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => /^(swiper|swiper-slide|swiper-container)$/.test(tag),
    },
  },
})

app.vueに記載して確認

<script setup>
import { register } from 'swiper/element/bundle';
register();

</script>

<template>
    <swiper-container>
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper-container>
</template>

オプションでnavigationなどを入れないと矢印やポジションが出てこないです。

<script setup>
import { register } from 'swiper/element/bundle';
register();

</script>

<template>
    <swiper-container　 
　　　　navigation="true" 
        pagination="true" 
        scrollbar="true"
   >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper-container>
</template>

公式ドキュメントに詳しいプロパティが書いてあるので見ながら実装すると好みに作れるはずです😊

参考記事