---
title: "NuxtApp"
description: "在 Nuxt 中，您可以在组合式函数、组件和插件中访问运行时应用上下文。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/guide/going-further/nuxt-app"
---
# NuxtApp

> 在 Nuxt 中，您可以在组合式函数、组件和插件中访问运行时应用上下文。

在 Nuxt 中，您可以在组合式函数、组件和插件中访问运行时应用上下文。

::read-more{to="https://v2.nuxt.com/docs/internals-glossary/context/#the-context" target="_blank"}
在 Nuxt 2 中，这被称为 **Nuxt context（Nuxt 上下文）**。
::

## Nuxt App 接口

::read-more{to="https://nuxt.zhcndoc.com/docs/4.x/guide/going-further/internals#the-nuxtapp-interface"}
跳转到 `NuxtApp` 接口文档。
::

## Nuxt 上下文

许多组合式函数和工具（无论是内置的还是用户编写的）可能需要访问 Nuxt 实例。该实例并不存在于应用的所有位置，因为每个请求都会创建一个新的实例。

目前，只有在 [插件](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/plugins)、[Nuxt 钩子](https://nuxt.zhcndoc.com/docs/4.x/guide/going-further/hooks)、[Nuxt 中间件](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/middleware)（如果使用 `defineNuxtRouteMiddleware` 包装）和[设置函数](https://vuejs.org/api/composition-api-setup)（在页面和组件中）中才能访问 Nuxt 上下文。

如果在无法访问上下文的情况下调用组合式函数，您可能会收到错误提示：“需要访问 Nuxt 实例的组合式函数在插件、Nuxt 钩子、Nuxt 中间件或 Vue 设置函数之外被调用。”在这种情况下，您也可以使用 [`nuxtApp.runWithContext`](https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-nuxt-app#runwithcontext) 在此上下文中显式调用函数。

## 访问 NuxtApp

在组合式函数、插件和组件中，您可以通过 [`useNuxtApp()`](https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-nuxt-app) 访问 `nuxtApp`：

```ts [app/composables/useMyComposable.ts]
export function useMyComposable () {
  const nuxtApp = useNuxtApp()
  // 访问运行时 nuxt 应用实例
}
```

如果您的组合式函数并非总是需要 `nuxtApp`，或者您只是想检查它是否存在，由于 [`useNuxtApp`](https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-nuxt-app) 会抛出异常，您可以改用 [`tryUseNuxtApp`](https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-nuxt-app#tryusenuxtapp)。

插件出于方便也会将 `nuxtApp` 作为第一个参数传入。

::read-more{to="https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/plugins"}
::

## 提供帮助函数

您可以提供帮助函数以便在所有组合式函数和整个应用中使用。这通常在 Nuxt 插件中完成。

```ts
const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', name => `Hello ${name}!`)

console.log(nuxtApp.$hello('name')) // 打印 "Hello name!"
```

::read-more{to="https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/plugins#providing-helpers"}
您可以在插件中返回包含 `provide` 键的对象来注入帮助函数。
::

::read-more{to="https://v2.nuxt.com/docs/directory-structure/plugins/#inject-in-root--context" target="_blank"}
在 Nuxt 2 的插件中，这被称为 **inject 函数**。
::

---

- [源码](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts)


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.