Create a useAnime Composable

[BayBreezy]

Request Description

Hello,

Instead of having to extract the $anime function from the nuxtApp, why not add a useAnime composable that can be used right away?

It can be added in the module.ts file.

Alternative Solutions

NA

Additional Details

No response

[ivodolenc]

Hi, thanks for the suggestion.

Nice idea, but maybe an opt-in option should be added:

// nuxt.config.ts

{
  anime: {
    composables: true // default is undefined
  }
}

With this option, the user chooses which method he wants to use. If enables composables, then provide ($anime) is disabled and vice versa.

Main reason is to avoid multiple global injections at the same time (provide and composable).

Also, keep in mind that the user can disable built-in auto imports.

In that case we will need an explicit import:

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

and the additional autoImport module option:

{
  anime: {
    autoImport: true // default is true
  }
}

By default, module autoImport are enabled.

---

I'm interested in merging this, I think it would be nice addition to module.

Can you please update the PR? Don't bother with the docs and examples, I can edit it later, no problem.

[BayBreezy]

Ok no problem. I will Update it to be an opt-in feature and let you know.

[BayBreezy]

@ivodolenc See here for the changes made --> f910e35.

Now if yo pass this to your nuxt.config, the composable will be added, if not, then the plugin is added

export default defineNuxtConfig({
// ...
  anime:{
    composable: true
  }
// ...
})

[ivodolenc]

This feature is now available in 2.1.0 version.

To use useAnime custom composable globally, enable it via module options:

// nuxt.config.ts

{
  anime: {
    composables: true
  }
}

Additionally, if you prefer to use only composables, you can disable the $anime helper:

// nuxt.config.ts

{
  anime: {
+   provide: false,
    composables: true
  }
}

See the docs for more info.

@BayBreezy Thanks again for your time and contribution.