Nuxt Bezier

This module integrates @noction/vue-bezier v2 transition components with Nuxt.

Demo

Install

npx nuxi@latest module add nuxt-bezier

Usage

Add the module to your nuxt.config.ts:

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

The module automatically imports all transition components and styles.

Available Components

Single Element Transitions:

• BlurTransition
• ClipPathTransition
• DissolveTransition
• FadeSlideTransition
• PushTransition
• RotateTransition
• ScaleTransition
• WipeTransition
• ZoomTransition

List Transitions:

• DissolveListTransition
• ScaleListTransition

Config

Use the nuxtBezier key to configure the module:

export default defineNuxtConfig({
  nuxtBezier: {
    prefix: 'My' // Optional: prefix for component names (e.g., MyDissolveTransition)
  }
})

Example

<template>
  <DissolveTransition>
    <div v-if="show">Content with dissolve effect</div>
  </DissolveTransition>
</template>

<script setup>
const show = ref(true)
</script>

Reference

For more information about props and usage, check the vue-bezier documentation.

License

MIT © 50rayn