mirror of
https://github.com/nuxt/nuxt.git
synced 2025-02-18 14:41:25 +00:00
feat(docs): useNuxt and tryUseNuxt hooks
This commit is contained in:
parent
f9487b6e08
commit
ac51440010
@ -989,7 +989,124 @@ An object with the following properties:
|
||||
|
||||
[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
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user