Nuxt Bezier

このモジュールは、@noction/vue-bezier コンポーネントをNuxt 3に統合します。

デモ

インストール

npx nuxi@latest module add nuxt-bezier

使用方法

インストール

統合するには、nuxt.config.ts に追加するだけで十分です。

export default {
  modules: [
    'nuxt-bezier'
  ]
}

必要な スタイル も自動的にインポートされます。

設定

設定には、nuxtBezier キーを使用します。 prefix と components オプションを設定できます。どちらもオプションです。

prefix - nuxtBezier コンポーネントの先頭に追加する値
components - マウントする特定のトランジションコンポーネント。デフォルトでは、すべてが追加されます。

設定例

export default {
  nuxtBezier: {
    prefix: 'Prefix',
    components: ['FadeTransition']
  }
}

適用

これで、アプリでトランジションコンポーネントを使用する準備ができました。基本的な例を次に示します。

<template>
    <fade-transition>
        <p v-show="show">Fade transition</p>
    </fade-transition>
</template>

<script setup>
const show = ref(true)
</script>

リファレンス

利用可能なすべての Props について詳しくは、vue-bezier モジュールをご確認ください。これはNuxt3への統合のためのラッパーに過ぎません。