👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。

使用 Runtime Config

開啟專案下 nuxt.config.ts 檔案，添加 Runtime Config

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '怎麼可以讓你知道呢 :P', // 會被 NUXT_API_SECRET 環境變數覆蓋
    public: {
      apiBase: '/api' // 會被 NUXT_PUBLIC_API_BASE 環境變數覆蓋
    }
  }
})

建立 Server API 來使用 Runtime Config，在 server/api 目錄下建立一個檔案 ./server/api/hello.get.js：

const runtimeConfig = useRuntimeConfig()

export default defineEventHandler((event) => {
  const { apiSecret } = runtimeConfig

  console.log(`接收到了一個 Server API 請求: ${event.path}`)
  console.log(`執行時的設定 [apiSecret]: ${apiSecret}`)

  return 'ok'
})

在 pages 目錄下建立一個檔案 ./pages/hello.vue：

<template>
  <div class="my-24 flex flex-col items-center">
    <span class="mt-4 text-2xl text-gray-600">回傳資料:</span>
    <p class="mt-4 text-3xl font-semibold text-blue-500">{{ data }}</p>
  </div>
</template>

<script setup>
const runtimeConfig = useRuntimeConfig()
const { apiBase } = runtimeConfig.public

console.log('runtimeConfig:', toRaw(runtimeConfig))
console.log(
  `嘗試在 ${process.client ? 'Client' : 'Server'} 取得 [apiSecret]: ${runtimeConfig.apiSecret}`
)

const { data } = await useFetch(`${apiBase}/hello`)
</script>

建立 .env 檔案，來覆蓋 Runtime Config

NUXT_API_SECRET=api_secret_nuxt3
NUXT_PUBLIC_API_BASE=http://localhost:3000/api

Runtime Config 特性

• 具有公開與私有的分別
  • 不要將敏感或機密資訊放置在公開 (public) 的選項
• 可以結合 .env 檔案來覆蓋設定
• 可以用來控制開發、測試或生產等環境的環境變數

建立 App Config

在專案目錄下建立一個檔案 ./app.config.ts：

export default defineAppConfig({
  theme: {
    primaryColor: '#00dc82',
    darkMode: false
  }
})

在 pages 目錄下建立一個檔案 ./pages/config.vue：

<template>
  <div class="my-24 flex flex-col items-center">
    <p class="mt-4 text-2xl text-gray-600">theme.primaryColor:</p>
    <span class="mt-4 text-3xl font-semibold text-blue-500">{{ theme.primaryColor }}</span>

    <p class="mt-4 text-2xl text-gray-600">theme.darkMode:</p>
    <span class="mt-4 text-3xl font-semibold text-blue-500">{{ theme.darkMode }}</span>
    <button
      class="mt-6 rounded-sm bg-blue-500 px-4 py-2 text-base font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2"
      @click="theme.darkMode = !theme.darkMode"
    >
      {{ `${theme.darkMode ? '取消' : '啟用'}深色模式` }}
    </button>

    <div class="mt-8">
      <NuxtLink to="/">回首頁</NuxtLink>
    </div>
  </div>
</template>

<script setup>
const appConfig = useAppConfig()
const { theme } = appConfig
</script>

在 pages 目錄下建立一個檔案 ./pages/index.vue：

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-gray-800">這裡是首頁</h1>
      <div class="my-4 flex flex-col space-y-4">
        <NuxtLink to="/config">前往 /config</NuxtLink>
      </div>

      <p class="mt-4 text-2xl text-gray-600">theme.darkMode:</p>
      <span class="mt-4 text-3xl font-semibold text-blue-500">{{ theme.darkMode }}</span>
    </div>
  </div>
</template>

<script setup>
const appConfig = useAppConfig()
const { theme } = appConfig
</script>

修改 app.vue 頁面：

<template>
  <div>
    <NuxtPage />
  </div>
</template>

App Config 特性

• 伺服器端與客戶端都能存取
  • 不要將敏感或機密資訊放置在 App Config 之中
• 具有響應式的更新
• 可以用來設定網站主題的變數、公開金鑰等非敏感資訊

Runtime Config 與 App Config 差異

感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

範例程式碼

• Nuxt 3 使用 Runtime Config & App Config

參考資料

• Nuxt Runtime Config
• Nuxt App Config