nanime

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 ref or a getter, and the animation rebuilds when it changes.
• Animate v-if and v-for with <AnimeTransition> and <AnimeTransitionGroup>.
• Use all of it without imports, since the module auto-imports everything.

🚀 Getting Started

npx nuxi module add nanime

It works with Nuxt 3.13.5 and up, and Nuxt 4.

💻 Usage

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>

📖 Documentation

Everything lives on nanimejs.netlify.app, with a live demo on every composable page. The changelog has what changed in each release.

🤖 AI Agents

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 nanime

The docs site also has an MCP server and llms.txt, if your agent prefers those.

🏷️ Versioning

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.

🏠 Local Development

Clone the repo, then:

pnpm install
pnpm dev      # docs and playground on :3001
pnpm test

⚖️ License

MIT © 2026 Ekure Edem