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