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: 6 days 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 (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-04-02T15:14:21.000Z (10 months ago)
• Last Synced: 2025-01-08T11:08:41.785Z (13 days ago)
• Topics: anime, animejs, javascript-animations, nuxt, nuxt-animations, nuxt-anime, nuxt-animejs, nuxt-module
• Language: TypeScript
• Homepage:
• Size: 581 KB
• Stars: 102
• Watchers: 3
• Forks: 5
• 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