[FIXED] How to display specific DOM only in local?

Issue

.env

APP_ENV=local

---

data() {
        return {
            appEnv: process.env.APP_ENV,

only for local set up, I want to display this debugging section.

<v-col v-if="appEnv == 'local'" cols="6" sm="6" md="9">{{ urlGroups }} </v-col>

I see no error on console, but I also see nothing render from {{appEnv}}

What did I miss ?

Solution

Using a condition in DOM is indirect and unreliable way to debug. Instead process.env.APP_ENV needs to be debugged directly, preferably with a breakpoint.

If it's Vue CLI setup that is used to use .env files then the problem is APP_ENV is not available for browser and it could be debugged that it's undefined.

As the documentation states, custom environment variables should have VUE_APP_ prefix in order to be available in browser. It should be:

VUE_APP_ENV=local

and accessed like process.env.APP_ENV in Vue app.

Answered By - Estus Flask

Answer Checked By - Timothy Miller (PHPFixing Admin)