昨天我們認識了專案的基石 app.vue。今天，我們要來認識另一個位於專案根目錄的重要檔案：app.config.ts。

什麼是 app.config.ts？

如果 nuxt.config.ts 是網站的「引擎室」，那 app.config.ts 就是使用者可以觸摸到的「儀表板設定菜單」。

它專門用來存放您網站的公開設定，這些設定需要具備兩個重要特性：

完全公開

這些設定會被打包送到使用者的瀏覽器，所以絕對不要把任何機密資訊（例如 API 金鑰）放在這裡！

響應式 (Reactive)

您可以在應用程式執行時，動態地改變這些設定，而所有用到這些設定的地方都會自動更新。

最常見的用途就是網站的主題設定、標題、或社群連結等。

如何使用？

使用 app.config.ts 非常簡單，只需要兩步：

第一步：定義設定

在專案根目錄建立 app.config.ts，並使用 defineAppConfig 來定義您的設定。

app.config.ts

// app.config.ts
export default defineAppConfig({
  // 這裡我用了您的專案名稱，讓它更貼切
  title: '人類補完計劃',
  theme: {
    primaryColor: '#3B82F6', // 藍色
    dark: false
  }
})

第二步：在元件中取用

在任何元件中，都可以使用 useAppConfig() 這個 composable 來取得這些設定。

最棒的是，useAppConfig() 回傳的物件是響應式 (reactive)的。

Component.vue

<script setup>
const appConfig = useAppConfig();

function toggleTheme() {
  // 直接修改 appConfig 的值，所有用到它的地方都會自動更新
  appConfig.theme.dark = !appConfig.theme.dark;
}
</script>

<template>
  <div :class="{ dark: appConfig.theme.dark }">
    <h1 :style="{ color: appConfig.theme.primaryColor }">
      {{ appConfig.title }}
    </h1>
    <button @click="toggleTheme">
      切換成 {{ appConfig.theme.dark ? '淺色' : '深色' }} 模式
    </button>
  </div>
</template>

重點複習：app.config vs. runtimeConfig

我們在 Day 3 提過這兩個設定，現在讓我們再次加深印象：

app.config (今天學的)

完全公開的設定，例如主題顏色、網站標題

可以在執行時被程式碼動態改變

runtimeConfig (在 nuxt.config.ts 裡定義)

可以存放私密的設定，例如 API 金鑰

通常在建置後，透過環境變數來設定，執行時不應該被改變

今日總結

今天我們學會了使用 app.config.ts 來管理網站的公開、響應式設定。它非常適合用來處理佈景主題、標題等與 UI 顯示相關的配置，讓您的網站更具動態性。

預告

了解了 app.config.ts 後，明天我們來看看另一個更強大的設定檔：nuxt.config.ts。那裡才是 Nuxt 專案真正的「大腦中樞」。