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