配置

nuxt.config

Nuxt 應用程式的起點仍然是您的 nuxt.config 檔案。

遷移

1. 您應該遷移到新的 defineNuxtConfig 函式，該函式提供了一個型別化的配置 schema。
   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

   {
     "files": [],
     "references": [
       {
         "path": "./.nuxt/tsconfig.app.json"
       },
       {
         "path": "./.nuxt/tsconfig.server.json"
       },
       {
         "path": "./.nuxt/tsconfig.shared.json"
       },
       {
         "path": "./.nuxt/tsconfig.node.json"
       }
     ]
   }
   

2. 執行 npx nuxt prepare 以生成 tsconfig 檔案。
3. 按照文件中的說明安裝 Volar。

Vue 更改

關於 Vue 最佳實踐的建議有很多變化，以及 Vue 2 和 3 之間的一些重大更改。

建議閱讀Vue 3 遷移指南特別是重大更改列表.

目前無法使用Vue 3 遷移構建與 Nuxt 3 結合使用。

Vuex

Nuxt 不再提供 Vuex 整合。相反，Vue 的官方建議是使用 pinia，它透過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` is the store instance
      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，它應該可以直接使用。