設定

nuxt.config

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

遷移

1. 您應該遷移至新的 defineNuxtConfig 函數，該函數提供類型化的配置架構。
   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 遷移指南，特別是重大變更列表。

目前無法將 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` is the store instance
      this.counter++
    },
  },
})

建立一個 plugin 檔案以全域化您的 store

import { useMainStore } from '~/store'

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

如果您想繼續使用 Vuex，您可以按照這些步驟手動遷移至 Vuex 4。

完成後，您需要將以下 plugin 新增至您的 Nuxt 應用程式

import store from '~/store'

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

對於較大型的應用程式，此遷移可能需要大量工作。如果更新 Vuex 仍然造成阻礙，您可能需要使用社群模組：nuxt3-vuex-module，它應該可以立即使用。