docs: add an example of provide with object syntax plugins (#24993)

This commit is contained in:
Alireza Jahandideh 2024-01-02 14:02:42 -08:00 committed by GitHub
parent fc37eea30f
commit 7bd1ade096
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -157,6 +157,7 @@ Normally, Vue.js composables are bound to the current component instance while p
If you would like to provide a helper on the [`NuxtApp`](/docs/api/composables/use-nuxt-app) instance, return it from the plugin under a `provide` key.
::code-group
```ts [plugins/hello.ts]
export default defineNuxtPlugin(() => {
return {
@ -166,6 +167,19 @@ export default defineNuxtPlugin(() => {
}
})
```
```ts [plugins/hello-object-syntax.ts]
export default defineNuxtPlugin({
name: 'hello',
setup () {
return {
provide: {
hello: (msg: string) => `Hello ${msg}!`
}
}
}
})
```
::
You can then use the helper in your components: