Using .env variables from Laravel inside Vue JS components.

I work mostly with Laravel for backend and Vue for frontend. One day I was working on an Oauth integration and it needed an api key. Sure, I could hard code that, or setup a config.js file to store that in, but that’s just one more place where configuration is needed, one more place future devs might not look when they need to make a change. That just seemed sloppy and messy to me. So I wondered if there’s a way to grab variables from laravel’s .env file and use those inside my Vue components.

Sure enough there is a way, it’s even in the laravel documentation. Somehow, I overlooked this little gem after 6 years of laravel development, this particular feature I’m sure is newer since mix wasn’t always around, and we used to use gulp for our build, but still I can’t believe I missed it.

All you need to do is open .env and add a variable with the prefix MIX. Like so:

MIX_CLIENT_ID=2
MIX_CLIENT_SECRET=sjglkjsljglskjgslkj
//then in your code: 
let data = {
id: process.env.MIX_CLIENT_ID,
secret: process.env.MIX_CLIENT_SECRET
}

That’s it. That’s all you need to do. You can now access variables from laravel’s .env file.