---
title: "插件与中间件"
description: "了解如何将 Nuxt 2 的插件和中间件迁移到 Nuxt 3。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/migration/plugins-and-middleware"
---
# 插件与中间件

> 了解如何将 Nuxt 2 的插件和中间件迁移到 Nuxt 3。

## 插件

插件现在采用不同的格式，只接收一个参数（`nuxtApp`）。

::code-group
```ts [Nuxt 2]
export default (ctx, inject) => {
  inject('injected', () => 'my injected function')
}
```

```ts [Nuxt 3]
export default defineNuxtPlugin((nuxtApp) => {
  // 现在可以通过 `nuxtApp.$injected` 访问
  nuxtApp.provide('injected', () => 'my injected function')

  // 你也可以使用这种格式，同时获得自动类型支持
  return {
    provide: {
      injected: () => 'my injected function',
    },
  }
})
```
::

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

::read-more{to="https://nuxt.zhcndoc.com/docs/3.x/api/composables/use-nuxt-app"}
了解有关 `nuxtApp` 格式的更多信息。
::

### 迁移

1. 将你的插件迁移为使用 `defineNuxtPlugin` 辅助函数。
2. 移除 `nuxt.config` 中 plugins 数组里位于 `plugins/` 文件夹内的任何条目。该目录下顶层的所有文件（以及子目录中的任何 index 文件）都会被自动注册。你可以通过文件名来指定插件仅在客户端或服务端加载，而不必设置 `mode`。例如，`~/plugins/my-plugin.client.ts` 只会在客户端加载。

## 路由中间件

路由中间件有不同的格式。

::code-group
```js [Nuxt 2]
export default function ({ store, redirect }) {
  // 如果用户未认证
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}
```

```ts [Nuxt 3]
export default defineNuxtRouteMiddleware((to, from) => {
  const auth = useState('auth')
  if (!auth.value.authenticated) {
    return navigateTo('/login')
  }
})
```
::

与 Nuxt 2 类似，放置在 `~/middleware` 文件夹中的路由中间件会被自动注册。你可以通过名称在组件中指定，但这通过 `definePageMeta` 来完成，而非组件选项。

`navigateTo` 是众多路由辅助函数之一。

::read-more{to="https://nuxt.zhcndoc.com/docs/3.x/directory-structure/middleware"}
::

### 迁移

1. 将你的路由中间件迁移为使用 `defineNuxtRouteMiddleware` 辅助函数。
2. 任何全局中间件（例如在 `nuxt.config` 中的）可以放置在 `~/middleware` 文件夹，文件名带有 `.global` 后缀，例如 `~/middleware/auth.global.ts`。


## Sitemap

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