3 different ways to access constants in a Vue template

In this post, I’ll show how to access a constant in the vue <template> tag.

If we consume the constant directly in the vue template we’ll get an error when compiling the app.

[Vue warn]: Property or method “NumberOne” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Here’s the example code with the above error.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>Constant number : {{ NumberOne }}</h3>
  </div>
</template>

<script>
const NumberOne = 1;

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
}
</script>

The above example may not compile at all because NumberOne is defined but we are not using it anywhere.

error: ‘NumberOne’ is assigned a value but never used

If you are using the constant anywhere in the file, then you shouldn’t see the above error.

Okay, let’s fix accessing constant in the vue template section.

Adding a reactive property in data() — Not the best

One way to silence this is to add a local property in the data and use the local variable in the template instead of directly accessing the constant.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>Constant number : {{ numberOne }}</h3>
  </div>
</template>

...

data () {
    this.numberOne = NumberOne;
}

This solves the problem, but we don’t need to have a reactive variable for a constant. (Vue change detection caveat)

Under the hood, vue creates getter and setter for numberOne. So, numberOne variable will be reactive.

For simple use cases like the above example, I think it’s okay to go with this approach. But, I don’t personally recommend.

Create private variables in created() hook — GOOD

We’ll have to create a variable in the created hook and utilize the variable in the template.

created () {
    this.NUMBER_ONE = NumberOne;
}

<h3>Constant number : {{ NUMBER_ONE }}</h3>

This is simple to do.

And this doesn’t add the variables to the reactive system because when the created() hook is called Vue has already finished the observation phase.

Note: all Vue API/internal properties start with either $ or _, so as long as your property doesn’t use these two prefixes it will be totally fine.

If you have very limited usage, I think this is the best way to use constants in the template.

A plugin to access constants — GOOD

If you have many constants that should be accessed across the files, it’s better to create a plugin and access these.

const Numbers = {
    NumberOne: 1
};

Numbers.install = function (Vue) {
    Vue.prototype.$getConst = (key) => {
        return Numbers[key];
    }
};

export default Numbers;

In the main.js file, add the following lines to use the plugin across.

import constPlugin from "./components/constPlugin";
Vue.use(constPlugin);

and finally in the file(s), we’ll call the function.

<h3>Constant number : {{ $getConst('NumberOne') }}</h3>

This is the best way of having the constants if you wish to use them all over your files.

If you have many files that use the common constants, it’s better to go with this approach.

References

• creating private variables