こんにちは、フルスタックエンジニアのryuです。
今回の記事は、Nuxt3でenvが読み込まれなかった際の対処方法について解説します。composablesでenvを読み込むように設定したつもりが、なぜか値が読み込まれない・・・envの部分で躓いた備忘録です。
同じ部分で躓いている方はぜひ参考にして下さい。
目次
Nuxt3でenvが読み込まれなかった際の対処方法
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から取得する際に躓いたポイントについて解説しました。
