配置

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) {
         //
       }
     }
   }
   

3. 如果您使用了router.routeNameSplitter，可以通过在新的pages:extend钩子中更新路由名称生成逻辑来实现相同效果：
   Nuxt 2Nuxt 3

   export default {
     router: {
       routeNameSplitter: '/'
     }
   }
   

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和Vue 3之间也有一些破坏性变更。

建议阅读Vue 3迁移指南，特别是破坏性变更列表。

目前无法在Nuxt 3中使用Vue 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);
})

对于大型应用，此迁移可能需要大量工作。如果更新Vuex仍然存在障碍，您可以考虑使用社区模块：nuxt3-vuex-module，它应该可以开箱即用。