How could I use const in vue template?

I tried to defined a const in a *.vue file:

<script>
    export const CREATE_ACTION = 1,
    export const UPDATE_ACTION = 2
<script>

And use them in the template:

<template>
    ...
    <select :disabled="mode === UPDATE_ACTION">
    ....
</template>

But it does not work. How can I use const in a Vue template?

If you expose them on your data, you are making them unnecessary reactive, as @mix3d mentioned...

A better approach is to add them into Vue object Reactivity in Depth:

<template>
      <div v-if="action === CREATE_ACTION">Something</div>
</template>

<script>
export default {
    created() {
        this.CREATE_ACTION = CREATE_ACTION;
        this.UPDATE_ACTION = UPDATE_ACTION;
    }
})
</script>

Expose them on your data:

new Vue({
    data:{
        CREATE_ACTION: CREATE_ACTION,
        UPDATE_ACTION: UPDATE_ACTION
    }
})

You can use plugin for this purpose as you want to include this in multiple components:

// constsPlugin.js
const YOUR_CONSTS = {
  CREATE_ACTION: 1,
  UPDATE_ACTION: 2
  ...
}

let YourConsts = {}; // As suggested by the comments.

YourConsts.install = function (Vue, options) {
  Vue.prototype.$getConst = (key) => {
    return YOUR_CONSTS[key]
  }
}

export default YourConsts

in main.js or where you define new Vue(), you have to use it like this:

import YourConsts from 'path/to/plugin'

Vue.use(YourConsts)

Now you can use this in a component template like following:

<div>
   <select :disabled="mode === $getConst('UPDATE_ACTION')">
</div>

What about using Mixins? This is the way I do it. Not sure it is the best or recommended way but the code looks so much cleaner.

data/actions.js

export const CREATE_ACTION = 1;
export const UPDATE_ACTION = 2;

export const actionsMixin = {
  data() {
    return {
      CREATE_ACTION,
      UPDATE_ACTION
    }      
  }
}

MyComponent.vue

<template>
  <div v-if="action === CREATE_ACTION">Something</div>
</template>

<script>
import {actionsMixin, CREATE_ACTION} from './data/actions.js';

export default {
  mixins: [actionsMixin]
  data() {
    return {
      action: CREATE_ACTION
    }      
  }
}
</script>

<template>
  <div v-if="FOO_CONST.bar">Something</div>
</template>

<script>
import {FOO_CONST} from './const.js';

export default {
  data() {
    return {
      FOO_CONST: Object.freeze(FOO_CONST) // this makes vue not reactive this data property
    }      
  }
}
</script>

In Vue 3 you can use setup().

Example:

<template>
  <div>
    hello {{ fooConst }}
  </div>
</template>

<script>
const fooConst = "bar";

export default {
  setup() {
    return {
      fooConst,
    }
  },
}
</script>

I've found Mixins to be a neat way to add constants non-reactively to the vue object.

First create your constants:

// Action.js
const Action = {
  CREATE: 1,
  UPDATE: 2
}

Action.Mixin = {
  created () {
    this.Action = Action
  }
}

export default Action

Then in the component:

<template>
  <select :disabled="mode === Action.UPDATE">
</template>

<script>
import Action from './Action.js'

export default {
  mixins: [Action.Mixin]
}
</script>

This is like a cross between Alessandro Benoit's and L. Palaiokostas' answers.

<template>
  <div>
    <p :style="{ color: $options.COLOR }">
      {{$options.HELLO}} {{$options.PERSON}}
    </p>
  </div>
</template>

<script>
const HELLO = 'Hello there.';
const COLOR = 'red';

export default {
  mounted() {
    console.log('Hello world');
  },
  COLOR,
  HELLO,
  PERSON: 'General Kenobi!',
}
</script>