nuxt-bezier

A Nuxt module providing Vue 3 transition components with Bezier timing functions. Includes fade, dissolve, blur, scale, slide, push, wipe, rotate, zoom, and clip-path transitions.
8,172 8
vue vue3 nuxt nuxt-module push slide scale rotate zoom animations blur clip-path transitions bezier fade dissolve
Install
npm install nuxt-bezier
Latest Version:2.0.0
Vue:3
License:MIT
Last Updated:Jan 27, 2026
Links: GitHub  ·  npm
Maintainer: 50rayn

Nuxt Bezier

NPM version NPM downloads

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

Related Packages

@noction/vue-bezier

A Vue 3 component library with customizable CSS-based transition components feat...

12,410 24
animations bezier blur clip-path css-transitions dissolve fade push rotate scale +12
@hypernym/nuxt-gsap

GSAP module for Nuxt.

95,099 311
animations nuxt nuxt-module gsap gsap-module nuxt-animations nuxt-gsap nuxt-gsap-module
nuxt-gsap-module

GSAP module for Nuxt.js

56,116
animations nuxt nuxt-module gsap gsap-module nuxt-animations nuxt-gsap nuxt-gsap-module nuxtjs
nuxt-animejs

Anime.js module for Nuxt.js

28,727
animations nuxt nuxt-module animejs animejs-module nuxt-animations nuxt-animejs nuxt-animejs-module nuxtjs
@codekraft-studio/vue-animated

Functional animation components using Animate.css

15,057 22
animations transitions vue vue-transitions animate.css vue-animated vue-animations vue-components vue-plugin

Version History

Version Released Vue License
2.0.0 ^3.0 MIT
1.12.1 ^3.0 MIT
1.12.0 ^3.0 MIT
1.11.0 ^3.0 MIT
1.10.2 ^3.0 MIT
Pre-releases (1)
Version Released Vue License
2.0.0-beta.1 ^3.0 MIT