nuxt-bezier

Reusable transition components

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.