Does Morphing Pill Menu work in Nuxt 3?

Yes. Drop it into any page or component. The component is client-safe; Nuxt handles the SSR boundary automatically. If you want explicit client-only rendering, wrap in ` `.

Does Morphing Pill Menu work with Vue 2?

No - the component uses the Vue 3 Composition API and ` ` syntax. Vue 2 support is not planned. If you need Vue 2, the HTML/CSS/JS variant works in any context.

Does Morphing Pill Menu work with TypeScript in Vue?

Yes. The component is typed and works with both `vue-tsc` and Volar. Props match the `data-anm-*` attributes documented on the main detail page.

Will the animation flash before hydration in Nuxt SSR?

Brief flash is possible because GSAP needs the client to initialize. The component sets the parked state via `gsap.set` on `onMounted` before the first paintable frame. For above-the-fold use in SSR contexts, add a CSS opacity:0 default that the component clears.

GSAP component for Vue

Morphing Pill Menu in Vue.

A compact Menu pill that grows into the whole navigation panel when clicked - no overlay stacked on top, the pill itself morphs open. Links cascade in letter by letter, roll on hover, and an image slot inside is ready to link anywhere.

Install

Morphing Pill Menu ships as a copy-paste Vue 3 single-file component. The only dependency is GSAP - Vue's reactivity and lifecycle hooks replace the React useGSAP adapter, so no extra package is needed.

BASH

Integrate

Where it goes in your Vue app

Morphing Pill Menu is a leaf-level interactive component. Drop it into any page, layout, or other component. It works in Vue 3 + Vite, Nuxt 3, and any standalone Vue setup.

In Nuxt, no special handling is needed - the component is client-safe and self-cleaning. If you want to ensure it never runs on the server (rare), wrap your usage in <ClientOnly>.

The component uses the <script setup> composition API and TypeScript-friendly defineProps.

Gotchas

Char masks come from the template

Labels split via v-for into mask/inner spans with function template refs collecting the inners per link - no innerHTML manipulation.

Open/close timelines are built per call

Fresh .to() timelines from live values keep the morph interruptible mid-flight. Cleanup in onUnmounted kills the active timeline, clears the idle timer and removes the document listeners.

FAQ

Common questions

Does Morphing Pill Menu work in Nuxt 3?: Yes. Drop it into any page or component. The component is client-safe; Nuxt handles the SSR boundary automatically. If you want explicit client-only rendering, wrap in .
Does Morphing Pill Menu work with Vue 2?: No - the component uses the Vue 3 Composition API and

Morphing Pill Menu in Vue.

Install Morphing Pill Menu in your Vue project

Where it goes in your Vue app

Common questions