# [Nuxt] Nuxt 3 - Runtime Config

###### tags: `Nuxt`

* 可以存放不適合寫在 JavaScript 內的資料，例如：不同環境的 API URL 或重要的 Token等機敏資料

## 範例

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // 寫在這一層的環境變數只能在 server 端取得
    token: '12345',
    public: {
      // 寫在 public 內的環境變數可在 client 端取得
      apiBaseUrl: 'https://www.xxx.com',
    },
  },
});

## .env file
:::info
* [官方文件 - Environment Variables](https://nuxt.com/docs/guide/going-further/runtime-config#environment-variables "Runtime Config · Nuxt Advanced")
* [官方文件 - .env File](https://nuxt.com/docs/guide/directory-structure/env ".env · Nuxt Directory Structure")
:::

* 建議將環境變數寫在 `.env` 內
* `.env` 檔案不會上傳至 GitHub，記得加到 `.gitignore`
* 變數名稱大寫，`NUXT` 開頭，`_` 分隔單字

# .env
NUXT_TOKEN=12345
NUXT_PUBLIC_API_BASE_URL=https://www.xxx.com

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    token: '',
    public: {
      apiBaseUrl: '',
    },
  },
});

## useRuntimeConfig
:::info
* [官方文件 - useRuntimeConfig composable](https://nuxt.com/docs/api/composables/use-runtime-config "useRuntimeConfig · Nuxt Composables")
* [官方文件 - Accessing Runtime Config](https://nuxt.com/docs/guide/going-further/runtime-config#accessing-runtime-config "Runtime Config · Nuxt Advanced")
:::

`useRuntimeConfig()` 可以在 `setup`、`Lifecycle Hooks`、`defineNuxtPlugin()`、`server routes` 內使用

// script setup
const runtimeConfig = useRuntimeConfig();

if (process.server) {
  console.log(runtimeConfig);
}

console.log(runtimeConfig); // { app: { ... }, public: { ... } }
console.log(runtimeConfig.app);
console.log(runtimeConfig.public); // 只有 publice 內的值，無法取得 runtimeConfig 第一層的 token

## process.env

若因維護專案或開發習慣等因素不使用 `runtimeConfig`，想繼續使用 `process.env`，需要用 `vite` 設定

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    define: {
      'process.env': process.env,
    },
  },
});

# .env
ENV=local
TOKEN=12345
WEB_URL=https://www.xxx.com

// script setup
console.log('ENV: ', process.env.ENV);
console.log('TOKEN: ', process.env.TOKEN);
console.log('WEB_URL: ', process.env.WEB_URL);

---

:::info
建立日期：2023-08-18
更新日期：2023-09-08
:::