vue3-carousel-nuxt の使用について

Nuxt.js に vue3-carousel-nuxt を導入した事例

ドキュメント

• Vue3 Carousel Nuxt Module
  • Nuxt.js での導入について
• Vue3-Carousel
  • 具体的な使用例や API などのドキュメント

ポイント

prefix

https://nuxt.com/modules/vue3-carousel-nuxt#usage

nuxt.config でのプレフィクスを Vcn などとして事例のタグ名にプレフィクスを付けるなどをしておいたほうがよさそう

<vcn-carousel>
  ・・・
</vcn-carousel>

style

https://nuxt.com/modules/vue3-carousel-nuxt#styling

スタイルの調整は以下のような形式にて

<style lang="scss" scoped>
:deep(.carousel__pagination) {
  // スタイルを記述 (指定されているスタイルは上書きされる模様)
}
</style>

コンテンツ間の調整

レイアウトは display: flex; が使用されているが gap を使用すると崩れが発生するため、
表示数を維持するには padding を使用したほうがよさそう

<style lang="scss" scoped>
// 格納要素に gap を使用すると表示個数が期待されないものになる可能性が
// :deep(.carousel__track) {
//   gap: 30px;
// }

:deep(.carousel__slide) {
  // 上記のように 30px の gap と合わせたいのであれば半分の値を padding に指定
  padding: 0 15px;
}
</style>

methods などの使用

https://ismail9k.github.io/vue3-carousel/api/methods.html

型定義

ref の値に該当する型定義が見当たらないため独自の定義が必要か

types/vue3-carousel-nuxt.d.ts

/**
 * @see https://ismail9k.github.io/vue3-carousel/api/methods.html
 */
export type VcnCarousel = {
  /** 前へ */
  prev(): void
  /** 後へ */
  next(): void
  // 使用するメソッドなど必要に応じて定義
}

ref の使用

ドキュメントの ref 指定の記述は :ref= となっていないが正しい指定となっている。

<!-- `:ref="myCarousel"` であると動作しない -->
<Carousel ref="myCarousel"> ... </Carousel>

ref() に格納した値を使用する場合は通常通り .value によりアクセスする。

• ドキュメントでは .value でのアクセスを行っていない

// 初期値の null は特に必要なし
const myCarousel = ref<VcnCarousel>()

myCarousel.value?.next()