配置

nuxt.config

你的 Nuxt 应用的起点仍然是你的 nuxt.config 文件。

迁移

1. 你应该迁移到新的 defineNuxtConfig 函数，它提供了一个带类型的配置模式。
   Nuxt 2Nuxt 3

   export default {
     // ...
   }
   

2. 如果你使用了 router.extendRoutes，你可以迁移到新的 pages:extend 钩子：
   Nuxt 2Nuxt 3

   export default {
     router: {
       extendRoutes (routes) {
         //
       }
     }
   }
   

ESM 语法

Nuxt 3 是一个 ESM 原生框架。虽然 unjs/jiti 在加载 nuxt.config 文件时提供了半兼容性，但请避免在此文件中使用 require 和 module.exports。

1. 将 module.exports 改为 export default
2. 将 const lib = require('lib') 改为 import lib from 'lib'

异步配置

为了使 Nuxt 的加载行为更可预测，异步配置语法已被弃用。考虑使用 Nuxt 钩子进行异步操作。

Dotenv

Nuxt 内置了对加载 .env 文件的支持。避免直接从 nuxt.config 中导入它。

模块

Nuxt 和 Nuxt 模块现在只在构建时使用。

迁移

1. 将所有的 buildModules 移动到 modules 中。
2. 检查模块的 Nuxt 3 兼容性。
3. 如果你有任何指向目录的本地模块，你应该将其更新为指向入口文件：

  export default defineNuxtConfig({
    modules: [
-     '~/modules/my-module'
+     '~/modules/my-module/index'
    ]
  })

目录变更

static/（用于存储静态资源）已更名为 public/。你可以将你的 static 目录重命名为 public，或者在 nuxt.config 中设置 dir.public 保持名称不变。

TypeScript

如果你使用 Nuxt 的 TypeScript 集成，迁移应用程序会更容易。这并不意味着你需要用 TypeScript 编写你的应用程序，只是 Nuxt 会为你的编辑器提供自动的类型提示。

你可以在文档中阅读更多关于 Nuxt 的 TypeScript 支持的信息。

迁移

1. 创建一个 tsconfig.json 文件，内容如下：

   {
     "extends": "./.nuxt/tsconfig.json"
   }
   

2. 运行 npx nuxi prepare 生成 .nuxt/tsconfig.json。
3. 按照文档中的说明安装 Volar。

Vue 变更

有一些对 Vue 最佳实践的推荐变更，以及 Vue 2 和 3 之间的一些重大变更。

建议阅读Vue 3 迁移指南，特别是重大变更列表。

目前无法将 Vue 3 迁移构建与 Nuxt 3 一起使用。

Vuex

Nuxt 不再提供 Vuex 集成。相反，官方的 Vue 推荐使用 pinia，它通过一个 Nuxt 模块提供了内置的 Nuxt 支持。在这里了解更多关于 pinia 的信息。

使用 pinia 提供全局状态管理的简单方法是：

安装 @pinia/nuxt 模块：

yarn add pinia @pinia/nuxt

在你的 nuxt 配置中启用该模块：

import { defineNuxtConfig } from 'nuxt/config';

export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

在你的应用根目录下创建一个 store 文件夹：

import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      // `this` 是 store 实例
      this.counter++
    },
  },
})

创建一个 插件 文件，以全局化你的 store：

import { useMainStore } from '~/store'

export default defineNuxtPlugin(({ $pinia }) => {
  return {
    provide: {
      store: useMainStore($pinia)
    }
  }
})

如果你想继续使用 Vuex，你可以手动迁移到 Vuex 4，按照这些步骤进行操作。

完成后，你需要将以下插件添加到你的 Nuxt 应用中：

import store from '~/store'

export default defineNuxtPlugin(nuxtApp => {
   nuxtApp.vueApp.use(store);
})