In nuxt config I have env object
env: {
hey: process.env.hey || 'hey'
},
as soon as I want to display it in component template:
{{ process.env.hey }}
I got an error
Cannot read property 'env' of undefined
Any idea what can cause that?
Add a comment
|
4 Answers
Nuxt < 2.13
process isn't directly available to templates, but you can access it by creating a computed property or adding it to your component's state. Here's an example:
<template>
<div>{{ message }}</div>
</template>
export default {
computed: {
message() {
return process.env.hey;
},
},
};
Nuxt >= 2.13
You can now use the runtime config like so:
nuxt.config
export default {
publicRuntimeConfig: {
message: process.env.hey || 'hello world!',
},
};
template.vue
<template>
<div>{{ $config.message }}</div>
</template>
6 Comments
Dominooch
Not sure if this answer is outdated, as I've already tried it in the latest version of Nuxt without any luck. Please see my answer below.
David Weldon
In my case I'm building a SPA, and this still works with the latest version nuxt. I assume this would work differently if the pages server generated.
Dominooch
Ah yes, I'm using universal mode. See my answer below for SSR
BT101
I use universal mode as well and this answer is still working.
David Weldon
@retroriff Good call! I've updated the answer.
|
In case someone is looking for a solution in Nuxt 3 and vite.
.env
VITE_APP_VARIABLE_NAME="your variable"
template.vue
<script setup lang="ts">
const loginUrl = import.meta.env.VITE_APP_VARIABLE_NAME as string;
</script>
2 Comments
emilie zawadzki
This is not working for me. My config : "nuxt": "^3.3.1", "vite-plugin-string": "^1.2.1"
Pramit Barua
i have tried "nuxt": "^3.3.1" and it is working for me. Maybe you have to bind the env file in package.json's script
"dev": "nuxt dev --port 8080 --dotenv .env.development", more info here vitejs.dev/guide/env-and-mode.htmlHere's how you can grab environment variables in a nuxt component.
First you must create a serverInit.js file in your Vuex Store. Because process.env is rendered server side, you must call it in the part of your app that is also rendered server-side....in this case, Vuex.
const state = () => ({
env: {},
buildEnv: '',
})
const mutations = {
setEnv(state, env) {
state.env = env
},
setBuildEnv(state, env) {
state.buildEnv = env
},
}
const actions = {
nuxtServerInit({ commit }) {
if (process.server) {
if (process.env.NUXT_ENV_BUILD_HASH) {
commit('setEnv', {
buildHash: JSON.parse(process.env.NUXT_ENV_BUILD_HASH),
})
} else {
commit('setEnv', {
buildHash: false,
})
}
commit('setBuildEnv', process.env.NODE_ENV)
}
},
}
const getters = {
env(state) {
return state.env
},
buildEnv(state) {
return state.buildEnv
},
}
export default {
state,
mutations,
actions,
getters,
}
As you can see above, if (process.server) is executed when the app is being rendered server side. This allows you to save anything inside process.env into the Vuex state. Then, when you want to call them in your components just run:
computed: {
...mapGetters(['env', 'buildEnv']),
}
Inside your component, and voila!
Comments
Vue components do not have access to environment variables directly. Think of it as Vue being client side and environment variables being on server side.
There is probably several ways to get around this. If you are using webpack, this is one option:
https://webpack.js.org/plugins/define-plugin/
You could define the environment variable as a global variable on the client side.
1 Comment
David Weldon
@dopeCode I'm confused why this is the accepted answer. When you use nuxt, it adds
process.env as a global variable on the client. This means that no additional steps are necessary, and components do have access to your predefined env vars.