Nuxt Anime Module

Anime module for Nuxt.

Features

Helps you integrate the Anime.js animation library
Provides the main anime helper globally
Supports custom composables
Zero-config setup ready to go
TypeScript friendly
Super easy to use

Quick Start

Install @hypernym/nuxt-anime to your project

npm i -D @hypernym/nuxt-anime

Enable the module in the main config file

// nuxt.config.ts

{
  modules: ['@hypernym/nuxt-anime']
}

That's it! Start developing your app!

Module

The module comes with a zero-config setup so after activation it automatically adds the Anime.js core and it is globally available without additional settings.

<!-- layout.vue | page.vue | component.vue -->

<template>
  <div>
    <h1 class="title">Nuxt Anime</h1>
  </div>
</template>

<script setup lang="ts">
  const { $anime } = useNuxtApp()

  onMounted(() => {
    $anime({ targets: '.title', translateX: 250, duration: 800 })
  })
</script>

Options

Nuxt Anime Module is optimized and supports Nuxt 3 with TypeScript. It also improves the development experience with detailed descriptions, examples and code auto-completion.

// nuxt.config.ts

{
  modules: ['@hypernym/nuxt-anime'],

  anime: {
    // Module options
  }
}

Provide

Type: boolean
Default: true

Provides the main $anime helper globally.

// nuxt.config.ts

{
  anime: {
    provide: true
  }
}

Available globally

const { $anime } = useNuxtApp()

$anime({ targets: '.class', translateX: 250, duration: 800 })

Composables

Type: boolean
Default: undefined

Specifies custom composables.

If enabled, allows the use of custom composables.

// nuxt.config.ts

{
  anime: {
    composables: true
  }
}

useAnime

Provides the main anime function as custom composable.

<script setup lang="ts">
  onMounted(() => {
    useAnime({ targets: '.class', translateX: 250, duration: 800 })
  })
</script>

// Explicit import (optional)
import { useAnime } from '#anime'

Auto Import

Type: boolean
Default: true

Specifies the auto-import feature.

If enabled, the composables will be available globally so there is no need to import them manually.

Since this is an opinionated feature, you can disable global auto-import and use explicit import only where you need it.

Works only if the composables: true option is enabled.

// nuxt.config.ts

{
  anime: {
    autoImport: false
  }
}

Community

Feel free to use the official discussions for any additional questions.

License

Anime.js Library

More details about Anime.js license can be found in the official repository.

Nuxt Anime Module

Developed in 🇭🇷 Croatia

Released under the MIT license.

animejs