Nuxt3で.envを使用する方法

はじめに

Nuxt3で.envを使う方法がいろいろな記事に書いてあり、
どれが本当に動くのか分からなくなったため、メモとして残します。

Nuxt3導入

ここでは省略します。

.envの反映方法

1. .envをルートディレクトリに作成します。

ルートディレクトリとはpackage.jsonとかがあるディレクトリですね

.env

TEST='これはテストです。'

2. nuxt.config.tsを修正

runtimeConfigを使用する。

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      test: process.env.TEST
    }
  }
})

3. 呼び出す。

useRuntimeConfigを使用すると、nuxt.config.tsで設定した変数を呼び出すことができます。

index.vue

<script setup lang="ts">
  const config = useRuntimeConfig();
</script>

<template>
  {{ config.public.test }}
</template>

ちゃんと呼び出せました。