Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

nuxt-anime

Enternikot50MIT0.1.13TypeScript support: included

NuxtAnime

nuxt, nuxt-anime, nuxt-animate, nuxt-module, anime-module, nuxt-animations, nuxt-anime-module, animations, animejs, animejs 4, animejs v4, anime

readme

NuxtAnime

npm version npm downloads License Nuxt Volta Anime

A Plug & Play Adapter for the new Anime.js 4 Version.

Features

  • ✨ Zero Configuration: No setup required to get started.
  • 💪 Flexible Usage: Choose your style – use as Composables, Directives, or Components.
  • 👷 Core Features: Currently supports animate and timeline. More functions and helpers are planned!
  • 👷 Type-Safe: Full TypeScript support for current Anime.js v4 parameters.
  • 🧩 Easy & Customizable: Simple to integrate and fully adaptable to your needs.
  • 🕹️ Full Control: Provides complete access to the JSAnimation object and methods returned by Anime.js for fine-grained control.

Quick Setup

Install the Module manually with:

npm install nuxt-anime

Then, add it to your modules in your nuxt.config

export default defineNuxtConfig({
  modules: ["nuxt-anime"],
});

That's it! You can now use NuxtAnime in your Nuxt app ✨

<script>
  const box = useTemplateRef("box");
  const anim = await useAnimate(box, {
    autoplay: false,
    x: 100,
    rotate: 360,
  });
</script>

Contribution

<summary>Local development</summary> 
  # Install dependencies
  npm install

  # Generate type stubs
  npm run dev:prepare

  # Develop with the playground
  npm run dev

  # Build the playground
  npm run dev:build

  # Run ESLint
  npm run lint

  # Run Vitest
  npm run test
  npm run test:watch

  # Release new version
  npm run release

📑 License

Published under the MIT License

changelog