Nuxt Bezier

This module integrates the @noction/vue-bezier component with Nuxt 3.

Demo

Install

npx nuxi@latest module add nuxt-bezier

Usage

Install

For integration is enough to add it into your nuxt.config.ts:

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

It will also import the necessary styles automatically.

Config

For configuration, use nuxtBezier key. There you can configure prefix and components options. Both of them are optional.

prefix - the value to prepend to the nuxtBezier components
components - specific transition components which should be mounted. By default, all of them are added.

Configuration example:

export default {
  nuxtBezier: {
    prefix: 'Prefix',
    components: ['FadeTransition']
  }
}

Appliance

Now, you're ready to use the transition components in your app. Here is a basic example.

<template>
    <fade-transition>
        <p v-show="show">Fade transition</p>
    </fade-transition>
</template>

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

Reference

For more information about all available Props, please check the vue-bezier module, since this one only a wrapper for its integration in Nuxt3.