nanime lets you use Anime.js v4 in Nuxt through composables. You call them in setup() like any other composable, and they wait for the element to mount, skip the server render, and clean up when the component goes away.
- Animate elements, text, SVG, drag and scroll with nine composables.
- Pass a
refor a getter, and the animation rebuilds when it changes. - Animate
v-ifandv-forwith<AnimeTransition>and<AnimeTransitionGroup>. - Use all of it without imports, since the module auto-imports everything.
npx nuxi module add nanimeIt works with Nuxt 3.13.5 and up, and Nuxt 4.
Composables are auto-imported, so there's nothing to import:
<script setup lang="ts">
const box = useTemplateRef('box')
useAnimate(box, { x: 200, loop: true, alternate: true })
</script>
<template>
<div ref="box" />
</template>Everything lives on nanimejs.netlify.app, with a live demo on every composable page. The changelog has what changed in each release.
If you use a coding agent, give it the nanime skill so it knows how to use the composables (instead of falling back to plain Anime.js inside onMounted):
npx skills add astraldev/nanime --skill nanimeThe docs site also has an MCP server and llms.txt, if your agent prefers those.
nanime hasn't hit 1.0 yet, so a minor release (0.2 → 0.3) can have breaking changes. Patch releases (0.2.0 → 0.2.1) won't.
The good news is that the default ^ range in your package.json only picks up patches, so you only move to a new minor when you decide to. When you do, the changelog tells you what to change.
Clone the repo, then:
pnpm install
pnpm dev # docs and playground on :3001
pnpm testMIT © 2026 Ekure Edem