feat(docs): useNuxt and tryUseNuxt hooks

This commit is contained in:
Andrey Yolkin 2023-08-16 01:10:14 +03:00
parent f9487b6e08
commit ac51440010
1 changed files with 118 additions and 1 deletions

View File

@ -989,7 +989,124 @@ An object with the following properties:
[source code](https://github.com/nuxt/nuxt/blob/main/packages/kit/src/context.ts) [source code](https://github.com/nuxt/nuxt/blob/main/packages/kit/src/context.ts)
- `useNuxt()` ::alert{type=info}
Keep in mind, Nuxt already pass itself as the second argument to the `setup` function, so you can use it instead of `useNuxt()` call. `useNuxt()` and `tryUseNuxt()` calls are useful when you want to access Nuxt in separate functions. You can look at [Nuxt Site Config](https://github.com/harlan-zw/nuxt-site-config) as a reference.
::
### `useNuxt()`
Get the Nuxt instance from the context. It will throw an error if Nuxt is not available.
#### Type
```ts
function useNuxt(): Nuxt
interface Nuxt {
options: NuxtOptions
hooks: Hookable<NuxtHooks>
hook: Nuxt['hooks']['hook']
callHook: Nuxt['hooks']['callHook']
addHooks: Nuxt['hooks']['addHooks']
ready: () => Promise<void>
close: () => Promise<void>
server?: any
vfs: Record<string, string>
apps: Record<string, NuxtApp>
}
```
#### Examples
::code-group
```ts [setupTranspilation.ts]
// https://github.com/Lexpeartha/nuxt-xstate/blob/main/src/parts/transpile.ts
import { useNuxt } from '@nuxt/kit'
export const setupTranspilation = () => {
const nuxt = useNuxt()
nuxt.options.build.transpile = nuxt.options.build.transpile || []
if (nuxt.options.builder === '@nuxt/webpack-builder') {
nuxt.options.build.transpile.push(
'xstate',
)
}
}
```
```ts [module.ts]
import { useNuxt } from '@nuxt/kit'
import { setupTranspilation } from './setupTranspilation'
export default defineNuxtModule({
setup() {
setupTranspilation()
}
})
```
::
## `tryUseNuxt()`
Get the Nuxt instance from the context. It will return `null` if Nuxt is not available.
#### Type
```ts
function tryUseNuxt(): Nuxt | null
interface Nuxt {
options: NuxtOptions
hooks: Hookable<NuxtHooks>
hook: Nuxt['hooks']['hook']
callHook: Nuxt['hooks']['callHook']
addHooks: Nuxt['hooks']['addHooks']
ready: () => Promise<void>
close: () => Promise<void>
server?: any
vfs: Record<string, string>
apps: Record<string, NuxtApp>
}
```
#### Examples
::code-group
```ts [requireSiteConfig.ts]
// https://github.com/harlan-zw/nuxt-site-config/blob/main/test/assertions.test.ts
import { tryUseNuxt } from '@nuxt/kit'
interface SiteConfig {
title: string
}
export const requireSiteConfig = (): SiteConfig => {
const nuxt = tryUseNuxt()
if (!nuxt) {
return { title: null }
}
return nuxt.options.siteConfig
}
```
```ts [module.ts]
import { useNuxt } from '@nuxt/kit'
import { requireSiteConfig } from './requireSiteConfig'
export default defineNuxtModule({
setup(_, nuxt) {
const config = requireSiteConfig()
nuxt.options.app.head.title = config.title
}
})
```
::
## Pages ## Pages