Nuxt3でenvが読み込まれなかった際の対処方法

こんにちは、フルスタックエンジニアのryuです。

今回の記事は、Nuxt3でenvが読み込まれなかった際の対処方法について解説します。composablesでenvを読み込むように設定したつもりが、なぜか値が読み込まれない・・・envの部分で躓いた備忘録です。

同じ部分で躓いている方はぜひ参考にして下さい。

※本ページには、プロモーション・アフィリエイトリンクが含まれています

Nuxt3でenvが読み込まれなかった際の対処方法
- composablesでenvを読み込む際は、publicに記載
- public配下に設定するとサーバーサイド、クライアントサイド双方で参照可能
nuxt.config.ts以外の設定
- .env
- composables/post.ts

composablesでenvを読み込む際は、publicに記載

まずは結論から。composablesでenvを読み込む際は、nuxt.config.tsのruntimeConfigでpublicに記載する必要があります。

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiUrl: process.env.NUXT_API_URL || 'http://localhost:8080'
    }
  },

ちなみに、読み込まれていない場合は以下のように書いていました。

export default defineNuxtConfig({
  runtimeConfig: {
      apiUrl: process.env.NUXT_API_URL || 'http://localhost:8080'
  },

public配下に設定するとサーバーサイド、クライアントサイド双方で参照可能

runtimeConfigのpublicに設定すると、サーバーサイド、クライアントサイド双方で参照可能になります。しかし、public無しの場合はsecretになり、サーバーサイドのみに参照可能になります。

composablesはクライアントサイドのため、publicの設定が必要になります。

詳しくは、こちらのドキュメントを参考にしてください。

https://nuxt.com/docs/api/composables/use-runtime-config

nuxt.config.ts以外の設定

nuxt.config.ts以外の設定も置いておきます。

.env

.envではAPI用のURLを定義しています。

NUXT_API_URL="http://localhost:8080"

composables/post.ts

こちらはAPIから記事を取得することを想定しています。

export const post = () => {
  const runtimeConfig = useRuntimeConfig()
    const getpost = async () => {
         const data = await $fetch( runtimeConfig.apiUrl + '/post/1', {
          method: 'get',
         })
         return data
    }
}

今回は、API連携時に、composablesのURLをenvから取得する際に躓いたポイントについて解説しました。

nuxt vue.js

Nuxt3でenvが読み込まれなかった際の対処方法