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

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!

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.

© Hypernym Studio