Setting environment variabel dalam Nuxt.js

di pembahasan kali ini saya akan mengangkat sebuah topik, yang kebetulan sekarang saya sedang mengerjakan sebuah project yang sebelumnya di bangun menggunakan vue js harus di migrasi ke dalam nuxt js karena beberapa alasan.

Sesuai judul topik yang kita bahas mengenai env( environment variabel) . env sendiri sangat berfungsi ketika kita akan melakukan deploy ke server sehingga ketika kita menambah atau mengubah url atau sejenisnya kita cukup tinggal mengubah di bagian env saja, sehingga kita tidak perlu untuk membuka keseluruhan program .

Untuk file env kita bisa mendeklarasikan program — program yang sensitif seperti, base_url, port, dan token_key dan sebagainya. untuk struktur dari file .env bisa di lihat di bawah ini.

setelah kita membuat file .env , selanjutnya kita bisa menginstall plugins env.

Jika kalian menginstall melalui yarn bisa mengikuti langkah-langkah di bawah ini.

yarn add dotenv atau npm install dotenv

namun jika kalian menginstall melalui npm kalian bisa menggunakan cara seperti di bawah ini.

npm i vue-env

Jika proses instalasi-nya berjalan sukses kalian bisa melihat di file package.json. selanjutnya pada bagian nuxt.config.js, masukkan kode ini di bagian paling atas program kau.

require('dotenv').config()

selanjutnya tambahkan lagi di dalam class *masih di dalam file nuxt.config.js.

export default {
   modules: [
       '@nuxtjs/dotenv' 

]
//kemudian tambahkan code di bawah ini

 env: {
    baseUrl:process.env.ARTICLE_BASE_URL  
             // fungsinya untuk mengakses file env yang ada di local 
      // dalam hal ini file nuxt.config.js berperan sebagai 
     // tempat akses file global artinya disini kita setting 
     //untuk akses fungsi global
  },

}

Setelah sudah selesai, selanjutnya kita kembali lagi ke file .env, dan dan setting semua yang di butuhkan teman -teman , atau bisa di lihat contoh referensi di bawah ini.

//contoh url dari backend

ARTICLE_BASE_URL= https://blok.contoh.co.id/api/articles

//contoh token_key dari backend
TOKEN_KEY= "12526464a726b633gf673"

baris kode di atas merupakan contoh dan paling umum di letakkan di dalam file environment. Lalu bagaimana cara implementasi-nya di dalam program ? untuk sederhananya bisa kamu lihat contoh di bawah ini.

data(){
return{
  article : process.env.ARTICLE_BASE_URL,
}
}

// kemudian misal teman  " mempunyai url apinya seperti ini 

//  "https://blok.contoh.co.id/api/articles/get_data" 

// maka teman teman bisa memanggil datanya seperti ini 

axios
      .get(
        this.article + "/get_data"
        {
          headers: { "token-key": process.env.TOKEN_KEY },
        }
      )
      .then((response) => {
        this.featured = response.data.data;
      });

nah bagaimana, sudah dapat pencerahan belum dari penjelasan di atas ? jadi, jika teman-teman masih bingung bisa bertanya di pada kolom komentar, namun jika ini membantu bisa bantu follow saya untuk update berikutnya.