v-if on a VueJS component

Question

need a simple quick fix, I want to show a "DEVELOPMENT" tag on my VueJS footer when the NODE_ENV in .env is not "production". Please help.

<template> <footer class="app-footer font-xs" v-if="process.env.NODE_ENV !== 'production'"> <span>© 2018 <b>PT Test</b>. All Rights Reserved.</span> <span class="ml-auto">DEVELOPMENT</span> </footer> <footer v-else class="app-footer font-xs"> <span>© 2018 <b>PT Test</b>. All Rights Reserved.</span> </footer> </template>

My .env file

NODE_ENV=local TZ=Asia/Jakarta

I didn't downvote but you could certainly add more information to this question such as what result you get and what error messages appear — Phil
– Phil, Commented Jul 26, 2018 at 7:17

Phil · Accepted Answer · 2018-07-26 07:18:16Z

7

All Vue template expressions are evaluated against the component context.

Add the condition to your component's data object

data () { return { isProduction: process.env.NODE_ENV === 'production' } }

and use

v-if="!isProduction"

edited Jul 26, 2018 at 7:18

answered Jul 26, 2018 at 7:11

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WilTree Over a year ago

Thanks a lot Phil, really appreciate your answer on such a newbie question :) Cheers!

Mako Over a year ago

In my opinion this is not correct approach. Better is create computed property or extends default Vue instance. Data should be for data like forms,...

Mako · Accepted Answer · 2018-07-26 09:01:37Z

If you will need use check if production on multiple places you can do

Vue.prototype.$isProductionEnv = process.env.NODE_ENV === 'production'

Then in every component it will be available like this.$isProductionEnv so

<div v-if="$isProductionEnv">Your contente</div>

Collectives™ on Stack Overflow

v-if on a VueJS component

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related