@vue-gsap-flip/nuxt

A powerful Vue 3 library for creating stunning flip animations using GSAP's Flip plugin. Modular, extensible, and easy to use.
34 downloads3 starsv1.1.1
lavolpecheprogrammalavolpecheprogramma

@vue-gsap-flip/nuxt

Nuxt 3 module for auto-registering vue-gsap-flip components and directives.

Installation

npm install @vue-gsap-flip/nuxt @vue-gsap-flip/core gsap

Setup

Add to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@vue-gsap-flip/nuxt']
})

If you find a problem with the "gsap/Flip" import, please add this configuration to your nuxt config:

build: {
 transpile: [
   "gsap"
 ]
}

What it does

This module automatically registers:

  • ✅ FlipElement component globally
  • ✅ useFlip composable globally
  • ✅ v-flip directive globally
  • ✅ Supports custom FLIP plugins

Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@vue-gsap-flip/nuxt'],
  vueGsapFlip: {
    directive: true, // Enable v-flip directive (default: true)
    plugins: [] // Custom plugins (default: [])
  }
})

Public & Custom Plugins

Register in config:

vueGsapFlip: {
  plugins: [
    { name: 'MyPlugin', from: '@/plugins/my-plugin' },
    { name: 'VueFlipRouterPlugin', from: '@vue-gsap-flip/vue-router' },
    { name: 'VueFlipReducedMotionPlugin', from: '@vue-gsap-flip/reduced-motion' },
    { name: 'VueFlipDebugPlugin', from: '@vue-gsap-flip/debug' },
  ]
}

Important: not use the vue-router plugin, the module provide this functionality yet.

Requirements

  • Nuxt 3 / 4
  • Vue 3
  • GSAP 3.13.0+

License

MIT