// Quick Tips //

How to access Laravel .env variables in Vue JS

by Dillon - Updated -

Using Laravel and Vue together is a common approach as it allows the MVC framework to handle the logic, and an application-like user interface for the frontend. Learn how to use Laravel .env variables in Vue.js.

MIX Environment Varaibles

Vue js files are compiled by Laravel Mix. To have Mix compile your .env variables you must prefix the variable name with mix_.

A good example of this would be setting the API URL for your SPA application, like so:

MIX_API_URL=http://app.test/api

Use Laravel environment variables in Vue JS

To use the variables in your Vue JS application, use the following:

process.env.MIX_API_URL

Laravel .env variables are undefined in Vue js? 

If your environment variables are returning undefined, it is likely that you haven’t compiled the assets since you changed the value of the variable. Sometimes it is easy to leave the watcher running. Cancel the current watch command and re-run it.

Laravel Mix Vue JS Watch for changes

Learn more tips for Vue and Laravel!

Related Posts

Dillon Smart

👋 Hey, I'm Dillon!

I'm a Full Stack developer from the U.K. I've been building websites and applications for 11 years! Along the way I've picked up a few things, and share them here on IKnowThatNow.com.

Feel free to reach out on Twitter!

0 Comment

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.