ホーム > Vue > Nuxt3で.envを使う方法
Vue

Nuxt3で.envを使う方法

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

⇨ Vue 記事の目次はこちら

Nuxt3 を触ってみています。

Nuxt3 で.env を使う方法についてまとめました。

Nuxt2.13 以降やり方がアップデートされていたようで、今までのやり方をしたらうまく動きませんでした。

環境
node --version v16.13.0
Nuxt3

失敗例

ルートディレクトリに.env を作成

(※(初心者向け)ルートディレクトリはプロジェクトディレクトリを指します。)

your-project-name/.env

のように.env という名前でファイルを作ります。

場所とファイル名さえ合っていれば大丈夫です。

ファイルの中をこうしてみます。

BASE_URL=https://127.0.0.1:8000

読み込めるかを実験

<template>
  <div>{{ baseUrl }}</div>
</template>

<script>
  export default {
    data() {
      return {
        baseUrl: "http://127.0.0.1:8000にしたい",
      }
    },
    created() {
      console.log(process.env.BASE_URL)
    },
  }
</script>

コンソール

Uncaught (in promise) TypeError: Cannot read property 'BASE_URL' of undefined

どうやら、ダメっぽいです。

実装方法(結論)

どうやら、nuxt.config.ts で定義して、config として出力するようです。

nuxt.config.ts を編集

export default defineNuxtConfig({
  publicRuntimeConfig: {
    baseUrl: process.env.BASE_URL,
  },
})

表示してみる

<template>
  <div>{{ $config.baseUrl }}</div>
</template>

<script>
  export default {
    data() {
      return {
        baseUrl: "http://127.0.0.1:8000にしたい",
      }
    },
    created() {
      console.log(this.$config.baseUrl)
    },
  }
</script>

うまく表示されました。やった!

set up 内で使いたいとき

<script setup lang="ts">
  const config = useRuntimeConfig()
  console.log(`${config.baseUrl}/api/count`)
  const { data } = await useAsyncData("count", () =>
    $fetch(`${config.baseUrl}/api/count`)
  )
  //$fetchをNuxt2のaxiosのようにbaseUrl指定する方法が見つからないのでこのようにやるのがベスト?なのかなと思っていますがどうですか?
</script>

まとめ

以上、Nuxt3 で env を使ってみました。

$fetch の baseUrl を axios の baseUrl のように変更することはできないのかな?と結構探したのですが見つかりませんでした。残念。

もし情報あれば教えてくださいませ!

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは!

Vue(Javascript)で filter を使って配列から条件にあったデータだけ抽出する方法