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)
|
[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
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user