Add Laravel .env variable to Vue component

laravel vue.js environment-variables laravel-mix

21,145

Solution 1

You must build your JS for the env variables to be replaced. You can do this with npm or yarn

https://laravel.com/docs/5.7/mix#running-mix

Solution 2

in windows :

thats worked for me without any require in webpack.mix

... just add a new variable in env file with this prefix : MIX_

MIX_API_URL=http://laravel:8000

but need to restart php artisan serve and also restart npm run watch....

  let api_url = process.env.MIX_API_URL;
  console.log("my env variable:");
  console.log(api_url);

in linux or docker:

i didnt use them yet

Solution 3

Pulled from the official docs @ https://laravel.com/docs/5.6/mix#environment-variables

Environment Variables

You may inject environment variables into Mix by prefixing a key 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 via the process.env object. If the value changes while you are running a watch task, you will need to restart the task:

process.env.MIX_SENTRY_DSN_PUBLIC

The most important thing to remember is that you have to use Laravel Mix for this to work. Mix is what is injecting the environment variable.

Solution 4

 process.env.MIX_VAR /  process.env.MIX_STRIPE_KEY

It's will work without any settings. Just run this command

npm run prod

View more solutions

21,145

Author by

Adnan

Updated on December 23, 2021

Comments

Adnan over 2 years
I would like to get access to an .env variable using Vue JS.

In my .env file I have added the 'MIX_' prefix to the var.
```
MIX_VAR=key
```
And then in the vue component, I have in the created():
```
console.log(process.env.MIX_VAR);
```
I keep getting undefined as the result.

I have tried clearing config cache, but still getting the same issue. Any ideas?
Dazzle over 4 years

You should also add require('dotenv').config(); to the top of webpack.mix.js
saber tabatabaee yazdi about 4 years

thats worked for me by adding a new variable in env file with this prefix : MIX_ but need to restart php artisan serve and also restart npm run watch....
saber tabatabaee yazdi about 4 years

thats worked for me without any require ... just add a new variable in env file with this prefix : MIX_ but need to restart php artisan serve and also restart npm run watch....
saber tabatabaee yazdi about 4 years

myserver is windows but it didnt work in docker. i dont know why
Pathros almost 4 years

In my case, it doesn't work neither way :/ with or without require('dotenv').config();
Pathros almost 4 years

@Dazzle In my case, it doesn't work neither way :/ with or without require('dotenv').config();
Dazzle almost 4 years

did you npm install dotenv? Try recompile or delete node_modules folder and reinstall
saber tabatabaee yazdi almost 4 years

@Pathros you need to stop (php artisan serve) and run again for any changes in env file ... did you test it ? check it please
Pathros almost 4 years

I am using Laravel Homestead. I have restarted the server many times and the MIX_ variables are not being identified / pulled. I don't understand why. What am I missing?
saber tabatabaee yazdi almost 4 years

@Pathros what about your local or development pc?
Daud khan almost 3 years

laravel.com/docs/5.7/mix#environment-variables
saber tabatabaee yazdi almost 3 years

@darryl-e-clarke (if you want) can you accept the other new answer voted in the last three months by StackOverflow users? ;) stackoverflow.com/a/60378481/308578
Mohammad Fahad Rao over 2 years

Will i have to restart npm and serve command everytime I change url? If yes then how would i run npm run watch on cpanel if i dont have it?