Nuxt .env and import a js into a store

Question

I have a somewhat large config.js file that I have created to for config type things. I am using a .env to keep secrets and such out of my github. In my .env file I have a variable called environment that I use to determine if I am on local, dev, stage, or prod. In my config.js file I am using that to load my certs and keys, and a bunch of other variables that are dependent on which environment I am on.

In one of my Vuex Store files, when I do the following it works

import config from '@/config'  
console.log(process.env.enviorment) // This logs out 'development' which i set in my .env file
const environ = config.developmemt

When I do the following I get 'environ is undefiend', even though I can see 'development' logged out.

import config from '@/config'  
console.log(process.env.enviorment) // This logs out 'development' which i set in my .env file
const environ = config[process.env.enviorment]

My VueEx file...

import config from '@/config'
console.log(process.env.enviorment) // <--- This is where it loads undefined at the app.js file which is my store, but loads the value in client.js
console.log(this.app) // <----------- this.app is undefined every time.
const environ = config.developmemt


export const state = () => (
{
 environment: eviron
}
)

Does this answer your question? [How to use .env variables in Nuxt 2 or 3?](https://stackoverflow.com/questions/67703133/how-to-use-env-variables-in-nuxt-2-or-3) — kissu, Nov 04 '21 at 16:05
Nuxt 2, and no. Each of those describe everything but the Vuex store. From what I can tell the Store is getting loaded before the .env file gets loaded. As what I am seeing is the app.js store is showing the console as undefined, but then client.js is loading the data just fine. — Jamie, Nov 04 '21 at 18:07
How about this one so? https://stackoverflow.com/a/65553464/8816585 Also, env variables are loaded first to my knowledge. — kissu, Nov 04 '21 at 18:47
Please share the exact snippet of code where this is undefined. — kissu, Nov 04 '21 at 19:24
If you want to have some state set from the start, you also can use [`nuxtServerInit`](https://nuxtjs.org/docs/directory-structure/store#the-nuxtserverinit-action). Because my previous answer is related to having the state into a **vuex action**. — kissu, Nov 05 '21 at 09:52

score 2 · Answer 1 · answered Nov 04 '21 at 22:23

2

You can use process.env only during build process. You want to use ENVs in runtime. In nuxt we have built-in ENVs handling: https://nuxtjs.org/docs/directory-structure/nuxt-config#runtimeconfig

In .env file add your ENVs:

ENVIRONMENT=staging

In nuxt.config.js you can use process.env.ENVIRONMENT, because it will be assigned during build time:

export default {
  publicRuntimeConfig: {
    environment: process.env.ENVIRONMENT
  },
};

Then you can get all your ENVs from publicRuntimeConfig during runtime (in vue and store files):

this.$config.environment

You can check my demo here: https://codesandbox.io/s/nuxt-envs-hx2cw?file=/pages/index.vue

answered Nov 04 '21 at 22:23

Cianekjr

366
1
4

Actually, we do actually have a `isDev` property in the context too: https://nuxtjs.org/docs/concepts/context-helpers – kissu Nov 05 '21 at 09:48
I should have clarified, this is exactly what I did, I just did not use this.$config, instead using process.env. However now that I am trying this.$config I am getting "Cannot read property '$config' of undefined." In my Vuex store above the only line I changed was console.log(process.env.enviorment) to be console.log(this.$config) – Jamie Nov 05 '21 at 12:39
@Jamie probably it's because you are trying this.$config outside mutation/action and you don't get this context. Check again, I added comments: https://codesandbox.io/s/nuxt-envs-hx2cw?file=/store/index.js You can also check if you can get this.$config in any .vue file. – Cianekjr Nov 05 '21 at 19:07
1

@kissu That's true, but sometimes isDev is not enough. For example you may want to add some libraries (e.g. analytics) only in production but not staging. Both production and staging has 'isDev === false', but still you don't know if it's staging or production. – Cianekjr Nov 05 '21 at 19:10
True! This one is still valid: https://stackoverflow.com/questions/69840426/nuxt-env-and-import-a-js-into-a-store/69846526?noredirect=1#comment123473512_69840426 – kissu Nov 05 '21 at 19:19
@Cianekjr is config available at the state level in the store? When I try it using your code except just use the heading: this.$config.environment in the state rather than the mutation, I get $config unavailable. I think the answer is no, but want to confirm. It just means Ill have to refactor some of the code a bit more than I thought. – Jamie Nov 08 '21 at 00:03
1

@Jamie I think so. Probably there is not way to get "this" content at the state level. – Cianekjr Nov 08 '21 at 09:20
2

Yep, as I've linked you before: https://github.com/nuxt/nuxt.js/issues/7602#issuecomment-735385911 – kissu Nov 08 '21 at 09:23

Nuxt .env and import a js into a store

1 Answers1