VueJs Mixed Variables?

[christoph-werker]

Hello together,

first i want to thank you for the great repository. I really like the concept and it opens me alot of doors. 👍

I'm using Laravel and using some mixed variables in my code. I access them through process.env.MIX_ANY_VARIABLE. Unfortunately, i'm getting always the variable from .ENV and not DOMAIN.ENV. Is there any way to handle this proper?

Thanks in advance

[gecche]

hi,

thanks for you message!

As I never used mixed vuejs variables, I need a concrete code example in order to try to help you

cheers

giacomo

[christoph-werker]

Hi Giacomo,

When you are using VueJs and want to access a Variable from the .ENV file you can do the following:

1. In your .ENV File you create the mixed Variable:

   APP_ENV=production
   MIX_APP_ENV="${APP_ENV}"

2. You build your JS Code with Laravel Mix.
3. Then you can access all the "MIX"-Variables with process.env.MIX_APP_ENV

But now comes the Problem. When i access the APP_ENV with env('APP_ENV') i'm getting the variable from the .ENV with the right Domain.(What your package does). However, when i access die Variable with JS (see 4.), i'm getting always the basic .ENV not the .ENV from the Domain.

Please see for Documentation: https://laravel.com/docs/master/mix#environment-variables

Hope you could understand the Problem now.

[gecche]

ok thanks... tomorrow I will try to give a look: today is holiday in Italy :)

[gecche]

Hi,

I have just had a bit of time for looking into the problem.

Honestly I don't know how to solve this at the moment. I'm not a frontend expert but I think that the problem is due to the fact that MIX get the .env values at compilation time and at line 79 of MixDefinitionsPlugin.js (I'm using Laravel 9.9 for testing) it is hard coded the .env file in the constructor call as first parameter. I think that this is the reason why you always get the original .env values when using mixed variables as you do.

Maybe I'm wrong, but even changing the policy of the mix .js files by using the right .env.domain file could not be the right solution because I think that you'll need a specific JS compilation for each domain. And honestly it is not only an ideal solution but also a bit outside the scope of this package.

The only idea I could suggest (not so brilliant but maybe could work...) is to put ALL the MIX variables in the standard ".env" followed by the domain name. E.g.:

MIX_APP_ENV-DOMAIN1="appenv1" 
MIX_APP_ENV-DOMAIN2="appenv2" 

Then you recall them using the current domain suffix.

Let me know if this could help.

Cheers

Giacomo

[christoph-werker]

That you for your input. I've the case that i want to use the same vuejs component in different domains. So my solution where that I'm checken for the domain an do different actions in the component. So multiple MIX variables won't work. But the solution with different .js files could work. So you know how to Chance the mix policy? 😊

[gecche]

Hi,

in order to change the MIX policy you have to change the npm packages and I'm not able to do this. However I think these two solutions could work:

1 - simply change the .env filename at line 79 in the MixDefinitionsPlugin.js file (I'm quite sure it works) 2 - digging on the web, I found this additional mix package which seems to fit your case: https://laravel-mix.com/extensions/env-file

Let me know If it helps

Cheers

Giacomo

[christoph-werker]

Hi Giacomo,

thank you very much for your help. I will try the second solution.

i appreciate you support. 👍

[christoph-werker]

One more i want to thank you. Your package was for my projects a game changer. :-) I can bundle a few Pages in one projects without any limitations. Regarding the performance atm it's not a problem.