CODEWITHSUNDEEP
laravelvue.jsenvironment-variables
user759235
user759235

Reputation: 2207

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

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)

Upvotes: 2

Views: 5032

Answers (3)

s00103898-276165-15433
s00103898-276165-15433

Reputation: 998

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

Upvotes: 3

Eldeeno
Eldeeno

Reputation: 301

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.

Upvotes: 6

jsphpl
jsphpl

Reputation: 5100

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:

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

Upvotes: 0

Related Questions