Does Pricing 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 Pricing 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 Pricing 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

Pricing in Vue.

A pricing section with a monthly/yearly switch. Flip it and every price rolls to its new number digit by digit and a savings chip pops in, while each plan name carries a constant shimmer.

Install

Install Pricing in your Vue project

Pricing 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

Pricing 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

Same imperative build as the vanilla and React versions

buildCard() runs once in onMounted per plan and creates the digit roller and period-swap markup directly.

Switzer is loaded from the component CSS

The @font-face in pricing.css points at /fonts/Switzer-Variable.woff2 at your site root. Self-host the file there (Fontshare, free) or change the family in the CSS - the fallback is the system sans.

The plan-name shimmer is a permanent loop

The gradient sweep on the plan names runs continuously from mount and pauses only when the tab is hidden or the visitor prefers reduced motion. Set a longer shimmer duration if the section sits next to other motion.

FAQ

Common questions

Does Pricing 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 Pricing work with Vue 2?: No - the component uses the Vue 3 Composition API and