Anime module for Nuxt.

• 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

1. Install @hypernym/nuxt-anime to your project

npm i -D @hypernym/nuxt-anime

# or via nuxi
npx nuxi@latest module add animejs

2. Enable the module in the main config file

// nuxt.config.ts

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

That's it! Start developing your app!

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>

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
  }
}

• 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 })

• Type: boolean
• Default: undefined

Specifies custom composables.

If enabled, allows the use of custom composables.

// nuxt.config.ts

{
  anime: {
    composables: true
  }
}

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'

• 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
  }
}

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

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

Developed in 🇭🇷 Croatia

Released under the MIT license.

© Hypernym Studio