0

Am using Nuxt-3 as my framework for the project and am very new to the framework too and when I was integrating api for my project and I was getting the response later when I tried to use api as global variable from the .env file in the root; but am unable to get the response as am getting error on the console hence forth kindly guide me on the right path in a simple way of explanation so I can sort the issue as well learn new concepts. I installed the dependencies with: npm install --save-dev @nuxtjs/dotenv

The code I tried was:

<template>

</template>
<script setup>
import axios from 'axios'

axios.defaults.baseURL = process.env.API_URL
axios.defaults.headers.common['Authorization'] = process.env.API_KEY

const response = await this.$axios.get('/pgs').then(response => response.data)
console.log(response)
</script>
kissu
  • 40,416
  • 14
  • 65
  • 133
user20663233
  • 11
  • 1
  • 2
  • Which error? The question lacks clear problem statement. If you don't have a value from env then the request stuff is redundant. env is not currently in use. See https://nuxtjs.org/tutorials/moving-from-nuxtjs-dotenv-to-runtime-config/ – Estus Flask Feb 27 '23 at 13:02
  • Does that one answer your question? https://stackoverflow.com/a/67705541/8816585 – kissu Feb 27 '23 at 13:37

2 Answers2

1

You don't need any dependency when you use .env file for your project. In all my projects, this is process I do when I store important data.

  1. Create a .env file
  2. Add data e.g EMAIL=test@gmail.com
  3. In your nuxt.config.ts file, add this runtimeConfig: { EMAIL: process.env.EMAIL, },
  4. To access it in the backend, your need to use the useRuntimeConfig composables See more details https://nuxt.com/docs/api/composables/use-runtime-config#useruntimeconfig.

See example on stackblitz https://stackblitz.com/edit/nuxt-starter-g534de?file=nuxt.config.ts

0

You can create .env files in your root directory by using following naming convention:

  1. for dev environment, you can name it as .env.dev,

  2. for prod environment, you can name it as .env.prod

Next step is to add publicRuntimeConfig in your nuxt config:

publicRuntimeConfig:{
  API_KEY: process.env.NODE_ENV == 'prod' ? 'AAA' : 'BBB'
}

Now you can use API_KEY in your components as:

this.$config.API_KEY
YogendraR
  • 2,144
  • 12
  • 17
  • 1
    Don't use files like `dev` and `prod`, set those per environment rather. – kissu Feb 28 '23 at 09:14
  • Yeah correct, that is only for reference – YogendraR Feb 28 '23 at 09:18
  • Can confuse people tho, making them think that this is how you manage variables per environment. It's like when everybody makes a `v-for` loop with the `index` as a `key`, yeah it's for quick and dirty examples but it's just plain wrong tbh. Giving a proper answer with a disclaimer or just not talking about the [bad approach](https://github.com/motdotla/dotenv#should-i-have-multiple-env-files) is probably better. – kissu Feb 28 '23 at 10:37
  • @kissu in the above answer, how can we indicate that NODE_ENV is prod or dev? I mean when we need to build for prod then how we can get `prod` value from `process.env.NODE_ENV` ? – Kishan Bhensadadiya Aug 23 '23 at 10:05