Using .env variables from Laravel inside Vue JS components.

Patrick Curl
Oct 3, 2018 · 1 min read

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store