Memahami Penggunaan Environment Variable Didalam File .env Pada Nuxt 3

Penggunaan Environtment Variable dalam Nuxt

Environment variable adalah variabel khusus untuk digunakan aplikasi pada lingkungan tertentu. Di Nuxt 3, kita bisa menggunakan file .env untuk menyimpan variabel-variabel ini.

File .env akan otomatis dibaca Nuxt saat aplikasi dijalankan saat fase dev, build, dan pada saat fase generate. Berikut pengertian dari ketiga fase tersebut

Pengertian Fase Dev, Build, dan Generate

Dev Time
Saat kita menjalankan aplikasi dengan perintah nuxi dev atau nuxt dev, variabel dari file .env akan dimuat.
Build Time
Ketika kita menyiapkan aplikasi untuk produksi dengan perintah nuxi build atau nuxt build, variabel ini juga akan dimuat.
Generate Time
Saat kita menggunakan perintah nuxi generate atau nuxt generate untuk membuat versi statis dari situs kita, variabel ini akan tersedia.

Contoh Penggunaan `.env` dalam Nuxt 3

Dokumentasi Nuxt 3 menjelaskan bahwa variabel didalam file .env hanya bisa digunakan pada file nuxt.config dan modules

Any environment variables set there will be accessible within your nuxt.config file and modules.

Salah satu studi kasus penggunaan file .env yaitu saat kita ingin menggunakan URL yang berbeda untuk lingkungan production dan development.

Buat File .env
Pertama, buat file .env di direktori root proyek Anda dan tambahkan variabel berikut:
```
API_URL=https://api.example.com
API_URL_DEV=http://localhost:3000/api
```
Konfigurasi nuxt.config.js
Pada nuxt.config kita bisa langsung mengakses variable didalam file .env dengan process.env.
Pada contoh dibawah kita akan menentukan API mana yang akan digunakan Axios sebagai baseUrl berdasarkan nilai dari process.env.NODE_ENV.
nuxt.config.ts
```
export default {
  modules: ["@nuxtjs/axios"],
  axios: {
    baseURL:
      process.env.NODE_ENV === "development"
        ? process.env.API_URL_DEV
        : process.env.API_URL,
  },
};
```

Mengakses Variabel dalam Komponen
Sekarang, kita bisa mengakses variabel ini dalam komponen Vue kita. Berikut contohnya:

component/DaftarItem.vue

<script setup>
const items = ref([]);

onMounted(async () => {
  // ==== Otomatis menggunakan variabel baseUrl ====
  const response = await useAxios().get("/items");
  items.value = response.data;
});
</script>

<template>
  <div>
    <h1>Daftar Item</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

File `.env` dalam lingkungan produksi

Setelah aplikasi dibangun di lingkungan produksi, server tidak akan secara otomatis membaca file .env.

Ini dikarenakan banyak platform deployment, seperti serverless atau edge nodes, tidak memiliki sistem file tradisional, sehingga kita perlu mengatur semua konfigurasi secara manual.

Jadi, penting bagi developer untuk mengatur variabel lingkungan yang diperlukan secara eksplisit.

Misalnya, di Netlify, ada antarmuka khusus untuk menerapkan environment variable, yaitu pada halaman site config > environtment variable.

Mengakses Environment Variable di Seluruh Aplikasi (Runtime Config)

Untuk mengakses environment variable di seluruh aplikasi Nuxt, kita bisa menggunakan runtime config. Dengan runtime config, kita bisa mendefinisikan variabel yang ingin digunakan di aplikasi, baik di sisi klien maupun server.

Penggunaan Runtime Config, Private vs Public

Kita bisa mengatur runtime config di file nuxt.config.ts seperti berikut:

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: "mySecret123", // Hanya dapat diakses di sisi server
    public: {
      apiBase: "https://example.com/api", // Dapat diakses di sisi klien
    },
  },
});

Di dalam objek runtimeConfig, terdapat dua bagian: apiSecret dan public.

Bagian public berisi variabel apiBase. Semua variable yang disimpan pada bagian public akan terekspos ke client, artinya variabel ini dapat terbuka untuk diakses oleh user. Variabel disini juga bsia diakses di sisi server

Lalu ada variabel apiSecret. Variabel ini berada di luar public artinya variabel ini hanya dapat diakses di sisi server, sehingga aman dari paparan di sisi klien dan tidak dapat dilihat oleh pengguna.

Berikut contoh penggunaannya:

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

console.log("API Base URL:", config.public.apiBase); // https://example.com/api
console.log("API Secret:", config.apiSecret); // UNDEFINED

if (import.meta.server) {
  console.log("API Base URL:", config.public.apiBase); // https://example.com/api
  console.log("API Secret:", config.apiSecret); // mySecret123
}
</script>

Serialisasi

Sebelum runtime config diteruskan ke Nitro misal ketika dev time. nilai-nilai variabel dalam runtime config akan diserialisasi.

Ini berarti bahwa objek yang tidak dapat diserialisasi (seperti fungsi, Sets, Maps, dan sebagainya) tidak boleh disertakan dalam runtime config. Hanya jenis data sederhana, seperti string, angka, dan objek biasa yang diperbolehkan.

Contoh yang Benar

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: "mySecret123", // String, valid
    public: {
      apiBase: "https://example.com/api", // String, valid
      timeout: 5000, // Angka, valid
      features: {
        enableFeatureX: true,
        enableFeatureY: false,
      },
    },
  },
});

Contoh yang Salah

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: () => "mySecret123", // Fungsi, tidak valid
    public: {
      apiBase: "https://example.com/api",
      mySet: new Set([1, 2, 3]), // Set, tidak valid
      myMap: new Map([["key1", "value1"]]), // Map, tidak valid
      features: {
        enableFeatureX: true,
        getFeatureData: () => ({ data: "someData" }), // Fungsi, tidak valid
      },
    },
  },
});
```a