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

Answer 1

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>

Answer 2

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"