Where to put constants in a .vue file

I often end up wishing there was a constants section in Vue, like data or methods. But something that useful will never be added into the framework, so instead I made a plugin to add it myself.

But lets explore the problem the plugin solves first:

import {
  A_CONSTANT_VALUE,
  ANOTHER_VALUE
} from '@/helpers/constants.js';

export default {
  data: function () {
    return {
      A_CONSTANT_VALUE,
      ANOTHER_VALUE
    };
  }
};

This isn't great, because data is for reactive values that can be changed, and constants shouldn't be changed. The same problem happens if you return the constants from a setup function. So instead I could put them in computed, like so:

import {
  A_CONSTANT_VALUE,
  ANOTHER_VALUE
} from '@/helpers/constants.js';

export default {
  computed: {
    A_CONSTANT_VALUE: function () {
      return A_CONSTANT_VALUE;
    },
    ANOTHER_VALUE: function () {
      return ANOTHER_VALUE;
    }
  }
};

However, that ends up with a lot of boilerplate. So to get the best of both worlds, I created a Vue plugin to automate away all of that boilerplate.

Here's what the plugin lets you do

import {
  A_CONSTANT_VALUE,
  ANOTHER_VALUE
} from '@/helpers/constants.js';

export default {
  constants: {
    A_CONSTANT_VALUE,
    ANOTHER_VALUE
  }
};

The plugin then runs the following code in every component during the beforeCreate lifecycle hook.

// Checks if the component is using the Options API and
// has a constants section
const constants = this.$options.constants;
if (constants) {
  // Create a computed property for each constant
  const computeds = {};
  Object.keys(constants).forEach(function (constantKey) {
    computeds[constantKey] = function () {
      // Freeze all non-primitives
      return Object.freeze(constants[constantKey]);
    };
  });
  // Add the computed constants to the computed
  // properties in the current component
  this.$options.computed = {
    ...this.$options.computed,
    ...computeds
  };
}

There is one downside to this approach, some IDEs/Editors will let you ctrl+click to go from the constant in the template to its definition in the script. This breaks that functionality. Though it should be possible to allow for it, I'm just not familiar with how. So if you know how, then create a PR to improve the plugin.

Here is the plugin, so you too can use this solution:

https://github.com/TheJaredWilcurt/vue-options-api-constants-plugin

Tell your friends. Let's get this to be a normal part of Vue.