Nuxt3で設定値をあつかう3つの方法(runtimeConfig/.env/app.config.ts)

Nuxt3でAPIのURLなどの設定値についてみていたら、
実はruntimeConfig以外にもいろいろあったので調べてみたときの備忘録(*´ω｀*)

nuxt.config.tsのruntimeConfig

いつものやつ。Nuxt3からはcomposablesが提供され、
型推論が効くようになっている。

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // Private keys are only available on the server
    apiSecret: '123',
    // Public keys that are exposed to the client
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})

export default async () => {
  const config = useRuntimeConfig()
  // Access public variables
  const result = await $fetch(`/test`, {
    baseURL: config.public.apiBase,
    headers: {
      // Access a private variable (only available on the server)
      Authorization: `Bearer ${config.apiSecret}`
    }
  })
  return result
}

• Nuxt Configuration Reference · Nuxt
• useRuntimeConfig · Nuxt Composables

環境変数(NUXT_*)

nuxt.config.tsのruntimeConfigの.envによる代替え。
NUXT_ではじめるとruntimeConfigに自動で設定してくれる。

ただ、型定義を用意してくれないので、一長一短。。

# .env

# runtimeConfig.apiSecret
NUXT_API_SECRET = "123"

# runtimeConfig.public.apiBase
NUXT_PUBLIC_API_BASE = "https://api.localhost:5555"

• useRuntimeConfig · Nuxt Composables

app.config.ts

すべてpublicの設定値のconfig.ts。 nuxt.config.tsを変更すると、nuxtを再起動が必要だけど、
別ファイルなので、nuxtを再起動せずに変更できる。

publicなものであれば、こちらのほうが開発時は便利(*´ω｀*)

export default defineAppConfig({
  theme: {
    primaryColor: '#ababab'
  }
})

const appConfig = useAppConfig();
console.log(appConfig.theme);

• app.config.ts · Nuxt Directory Structure
• useAppConfig · Nuxt Composables

以上!! それぞれ特徴があるので、使い分けていきたい(*´ω｀*)

参考にしたサイトさま

• Nuxt3入門(第5回) - アプリケーションの設定情報を管理する | 豆蔵デベロッパーサイト