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

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

愛媛在住のエンジニア兼ブロガー。
工場勤務から社内SEにキャリアチェンジ。
主に社内向けのシステム開発を行っています。

【ブログ運営歴】2021.6~
【プログラミング歴】2022.3~
本業：Java,MySQL、個人：Javascript

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>

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

参考記事