How can I use dynamic .env variables in a Laravel/Vue app without recompiling?

The issue stems from how Laravel Mix (and webpack) works: it replaces any reference to process.env values at compile time. In your case, when you write:

JAVASCRIPTCopied
const ENV = {
  API_URL: process.env.MIX_URL,
};

the value of process.env.MIX_URL is baked into the compiled app.js. If you later change your .env file without re-running the build, the compiled file won’t update dynamically.

How to Make Environment Variables Dynamic

1. Server-Side Injection:
   Instead of baking in the .env value into the JS bundle, you can pass it from your Laravel backend on each request. For example, in your main blade file, you can inject the variables as a global JS object:

   BLADECopied
   <!-- In your main Blade view -->
   <script>
       window.appConfig = {
           apiUrl: "{{ env('MIX_URL') }}"
       };
   </script>

   Then in your JavaScript, access it like so:

   JAVASCRIPTCopied
   const API_URL = window.appConfig.apiUrl;

   This way, the variable is set at runtime, and any changes you make to your .env or configuration on the server will be reflected as soon as the view is rendered.

2. API Endpoint for Configuration:
   Alternatively, you could create an API endpoint that returns your configuration values. Your front-end can fetch these values at runtime before making your API calls.

Why It’s Happening

• Compile-Time Replacement:
  Laravel Mix uses webpack’s DefinePlugin (or similar mechanism) to replace process.env.MIX_URL with the value from the environment at compile time. This is why the value is hardcoded into app.js once built.

• No Runtime Update:
  Because the value is compiled into your JavaScript bundle, any runtime changes to the .env file won’t be recognized unless you recompile your assets.

Conclusion

If you need truly dynamic values that change without recompiling your assets, avoid referencing process.env directly in your code and instead inject these values from the server at runtime.