https://github.com/hypernym-studio/nuxt-anime
Anime module for Nuxt.
https://github.com/hypernym-studio/nuxt-anime
anime animejs javascript-animations nuxt nuxt-animations nuxt-anime nuxt-animejs nuxt-module
Last synced: 4 months ago
JSON representation
Anime module for Nuxt.
- Host: GitHub
- URL: https://github.com/hypernym-studio/nuxt-anime
- Owner: hypernym-studio
- License: mit
- Created: 2020-11-30T16:46:11.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-02T15:14:21.000Z (about 2 years ago)
- Last Synced: 2025-11-23T07:24:20.841Z (7 months ago)
- Topics: anime, animejs, javascript-animations, nuxt, nuxt-animations, nuxt-anime, nuxt-animejs, nuxt-module
- Language: TypeScript
- Homepage:
- Size: 581 KB
- Stars: 106
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
- Codeowners: .github/codeowners
Awesome Lists containing this project
README
# 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
```sh
npm i -D @hypernym/nuxt-anime
# or via nuxi
npx nuxi@latest module add animejs
```
2. Enable the module in the main config file
```ts
// 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.
```html
Nuxt Anime
const { $anime } = useNuxtApp()
onMounted(() => {
$anime({ targets: '.title', translateX: 250, duration: 800 })
})
```
## 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.
```ts
// nuxt.config.ts
{
modules: ['@hypernym/nuxt-anime'],
anime: {
// Module options
}
}
```
## Provide
- Type: `boolean`
- Default: `true`
Provides the main `$anime` helper globally.
```ts
// nuxt.config.ts
{
anime: {
provide: true
}
}
```
**Available globally**
```ts
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.
```ts
// nuxt.config.ts
{
anime: {
composables: true
}
}
```
### useAnime
Provides the main `anime` function as custom composable.
```html
onMounted(() => {
useAnime({ targets: '.class', translateX: 250, duration: 800 })
})
```
```ts
// 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.
```ts
// nuxt.config.ts
{
anime: {
autoImport: false
}
}
```
## Community
Feel free to use the official [discussions](https://github.com/hypernym-studio/nuxt-anime/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.txt) license.
© Hypernym Studio