.env variables return undefined in Vue components inside a Laravel project

Question

Trying to get the .env variables to work inside Vue components in an Laravel project but the just return as undefined. I have tried npm run watch, npm run dev, artisan serve but no result.

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "production": "mix --production"
    },
    "devDependencies": {
        "@intlify/eslint-plugin-vue-i18n": "^0.11.1",
        "@vue/compiler-sfc": "^3.0.11",
        "autoprefixer": "^10.2.5",
        "axios": "^0.19.2",
        "bootstrap": "^4.6.0",
        "eslint": "^7.27.0",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.18",
        "lodash": "^4.17.19",
        "node-sass": "^6.0.0",
        "popper.js": "^1.16.1",
        "postcss": "^8.2.15",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^10.0.0",
        "tailwindcss": "^2.1.2",
        "vue": "^3.0.5",
        "vue-loader": "^16.1.2",
        "vue-template-compiler": "^2.6.12",
        "webpack-cli": "^4.7.0"
    },
    "dependencies": {
        "@vue/cli": "^4.5.13",
        "browser-sync": "^2.26.14",
        "browser-sync-webpack-plugin": "^2.3.0",
        "npm-watch": "^0.9.0",
        "postcss-import": "^14.0.2",
        "vue-i18n": "^9.1.6",
        "vue-router": "^4.0.8",
        "vue3-click-away": "^1.2.1",
        "vuex": "^4.0.0"
    }
}

.env

VUE_APP_I18N_SUPPORTED_LOCALE=en,de,nl

Component.vue

console.log(process.env.VUE_APP_I18N_SUPPORTED_LOCALE)

select my answer as the right answer if it worked for you

Eldeeno
– Eldeeno

2021-11-04 19:55:35 +00:00
Commented Nov 4, 2021 at 19:55 — Eldeeno
– Eldeeno, Commented Nov 4, 2021 at 19:55

Eldeeno · Accepted Answer · 2021-05-27 16:57:25Z

6

You'll have to prefix the variable in your .env with "MIX" like this: MIX_VUE_APP_I18N_SUPPORTED_LOCALE=en,de,nl, then you can call it by doing console.log(process.env.MIX_VUE_APP_I18N_SUPPORTED_LOCALE). read more on the Laravel doc

Also, remember to restart your server, recompile the vue app and then you should be good to go.

answered May 27, 2021 at 16:57

Eldeeno

3014 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

s00103898-276165-15433 · Accepted Answer · 2021-12-20 17:28:31Z

3

You may inject environment variables into your webpack.mix.js script by prefixing one of the environment variables in your .env file with MIX_:

MIX_SENTRY_DSN_PUBLIC=http://example.com

After the variable has been defined in your .env file, you may access it via the process.env object. However, you will need to restart the task if the environment variable's value changes while the task is running:

process.env.MIX_SENTRY_DSN_PUBLIC

I've tested it and it works for Laravel 5.7 and Vue 2.6.

Reference: https://laravel.com/docs/8.x/mix#environment-variables

answered Dec 20, 2021 at 17:28

s00103898-276165-15433

1,05811 silver badges12 bronze badges

Comments

jsphpl · Accepted Answer · 2021-05-27 15:05:02Z

0

process.env holds the actual environment variables available to the node.js process when it is started.

If you want to load the values from .env and have your node process treat them just as regular environment variables, you could use one of the existing npm packages, eg. dotenv.

But beware:

The values are only available (and "frozen") at build time
You might expose confidential data like api keys or other secrets to the client, if you're not careful

answered May 27, 2021 at 15:05

jsphpl

5,1203 gold badges27 silver badges27 bronze badges

Collectives™ on Stack Overflow

.env variables return undefined in Vue components inside a Laravel project

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related