Skip to content
This repository was archived by the owner on Apr 6, 2023. It is now read-only.

docs(plugins): add note about composable usage #6744

Merged
merged 8 commits into from
Aug 22, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions docs/content/2.guide/3.directory-structure/11.plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,26 @@ export default defineNuxtPlugin(nuxtApp => {
})
```

## Using Composables Within Plugins

You can use [composables](/guide/directory-structure/composables) within Nuxt plugins:

```ts
export default defineNuxtPlugin((NuxtApp) => {
const foo = useFoo()
})
```

However, keep in mind there are some limitations and differences:

**If a composable depends on another plugin registered later, it might not work.**

**Reason:** Plugins are called in order sequencially and before everything else. You might use a composable that dependants on another plugin which is not called yet.

**If a composable depends on the Vue.js lifecycle, it won't work.**

**Reason:** Normally, Vue.js composables are bound to the current component instance while plugins are only bound to `nuxtApp` instance.

## Automatically Providing Helpers

If you would like to provide a helper on the `NuxtApp` instance, return it from the plugin under a `provide` key. For example:
Expand Down