Nuxt Bezier

此模組整合了 @noction/vue-bezier 元件與 Nuxt 3。

Demo

安裝

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 的包裝器。