Getting Started
Introduction
SSR Safe animations with animejs
Introduction
nanime is a Nuxt module that brings AnimeJS into your Vue & Nuxt applications with full SSR safety and reactive composables. No manual setup, no lifecycle juggling.
Why?
Using AnimeJS in Nuxt requires onMounted guards, manual cleanup on unmount, and care around SSR to avoid hydration mismatches. nanime moves that boilerplate into composables so you don't have to repeat it in every component.
Features
- SSR Safe: Composables are guarded against server execution. No
onMountedwrappers or client-only checks needed. - Reactive: Parameters accept
ref,computed, and getter functions. Animations re-run when values change. - Auto-imported: Composables are registered automatically — no manual imports or plugin setup.
Composables
| Composable | Wraps | Description |
|---|---|---|
useAnimate | animate() | Core animation — CSS properties, transforms, SVG, JS objects |
useWaapiAnimate | waapi.animate() | Web Animations API — hardware-accelerated, off-main-thread |
useAnimatable | createAnimatable() | Imperative property setters with built-in transitions |
useSplitText | splitText() | Split text into lines, words, and characters for animation |
useScrambleText | scrambleText() | Text scramble/reveal effects with reactive text cycling |
useDraggable | createDraggable() | Drag interactions with snap, bounds, and axis constraints |
Next Steps
Ready to start animating? Head over to the Installation guide to add nanime to your project.
Each composable page includes a live demo with the full code you can copy directly into your project.