How to access Laravel env variables in Vue.js | Laravel MIX
By Dillon Smart · · · 1 Comments
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 environment variables in Vue.js.
MIX Environment Varaibles
Vue js files are compiled by Laravel Mix. To have Mix compile your environment variables from your .env file you must prefix your variable names 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.
1 Comment
Vue 3 Popup Modal Component – Create a Modal - IKnowThatNow
[…] Do you use Vue with your Laravel Application? Learn how to use environment variables in Vue. […]