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 中集成的包装器。