設定

nuxt.config

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

遷移

1. 您應該遷移到新的 defineNuxtConfig 函式，它提供了類型化的設定 schema。
   Nuxt 2Nuxt 3

   export default {
     // ...
   }
   

2. 如果您使用 router.extendRoutes，您可以遷移到新的 pages:extend hook
   Nuxt 2Nuxt 3

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

3. 如果您使用 router.routeNameSplitter，您可以在新的 pages:extend hook 中更新路由名稱產生邏輯來達到相同的結果
   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 hooks 進行非同步操作。

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 遷移指南，特別是 重大變更列表。

目前無法在 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` 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，它應該可以開箱即用。