運営者:そうすけ
愛媛のエンジニア兼ブロガー。
工場勤務→社内SE→自社開発にキャリアチェンジ。
主にバックエンド開発を行っています。
【ブログ運営歴】2021.6~
【プログラミング歴】2022.3~
本業:Java,MySQL、個人:Typescript
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>
公式ドキュメントに詳しいプロパティが書いてあるので見ながら実装すると好みに作れるはずです😊
参考記事
コメント