How to access Laravel env variables in Vue.js | Laravel MIX

· Laravel · Vue

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:


Laravel Environment Variables in Vue JS

Use Laravel environment variables in Vue JS

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


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!


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. […]

Was this helpful? Leave a comment!

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

Related Posts

Laravel Undefined Constant header_x_forwarded_all after upgrading Laravel version

Updated 2nd October 2023

Laravel Trusted Proxies

Have you upgraded your Laravel application from Laravel 8 to Laravel 9 and received the “Undefined Constant llluminate\Http\Request::HEADER_X_FORWARDED_ALL” error when running composer update? The error is caused by Laravel dropping the Fideloper/proxy package in Laravel 9, and it can be easy to miss on the official documentation. As of Laravel 9, Fideloper/proxy has been incorporated

Laravel – Specified key was too long Error

Updated 18th May 2021

With Laravel 5.4, some users may be hit with the Laravel Specified key was too long Error when migrating the database. This is because in the latest Laravel update, the developers made changes to the default database charset, making it utf8mb4. If your using MySQL 5.7.7 or higher, you won’t encounter this issue, however older versions of MySQL

Laravel 9: How to Add a New Column to an Existing Table in a Migration

Updated 1st October 2023

Laravel has a number of features designed to make developing web applications easier and faster. Migrations in Laravel allows us to manage the structure of our databases. In this post, you will learn how to add a new column to an existing table in a migration. Create a new migration file First, we need to