ホーム

転職ドラフト(次回12/15)

Nuxt3で.envを使う方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

⇨ Vue 記事の目次はこちら

Nuxt3 を触ってみています。

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

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

環境
node --version v16.13.0
Nuxt3

目次

  1. 失敗例
  2. 実装方法(結論)

失敗例

ルートディレクトリに.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 から頂ければ幸いです。

それでは!