Nuxt Bezier

這個模組將 @noction/vue-bezier 組件與 Nuxt 3 整合。

示範

安裝

npx nuxi@latest module add nuxt-bezier

用法

安裝

若要整合，只需將其新增至您的 nuxt.config.ts 即可。

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

它也會自動匯入必要的 styles。

設定

若要設定，請使用 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 的封裝器。