Introduction

nanime is a Nuxt module for AnimeJS v4. It wraps AnimeJS functions in composables, so animate() becomes useAnimate(). <AnimeTransition> and <AnimeTransitionGroup> animate elements in and out.

This component slides a box 200px to the right and back on a loop:

<script setup lang="ts">
const box = useTemplateRef('box')

useAnimate(box, { x: 200, loop: true, alternate: true })
</script>

<template>
  <div ref="box" />
</template>

What does the module handle?

• SSR: composables wait for the element to mount, so nothing runs on the server.
• Cleanup: the animation reverts when the component unmounts.
• Reactivity: the animation rebuilds when a ref, computed or getter passed as the target or parameters changes.
• Imports: composables and components are auto-imported.

Next steps

• Installation to add the module.
• Composables for each API, with a live demo on every page.
• Transition components for animating elements and lists in and out.
• Examples for a file manager, a trip planner and a music player, each built from several composables.
• Use with AI agents to install the agent skill or connect the docs MCP server.
• Animation performance for keeping animations fast.
• Accessibility for respecting reduced motion.
• Compared with Nuxt modules and compared with Vue packages for how nanime differs from AnimeJS on its own and from other wrappers.