Share constants between Vue components

Question

I have a collection of static data that I want to access in some of my Vue components. Example:

COLORS = Object.freeze({
    RED: 1,
    GREEN: 2,
    BLUE: 3,
})
FLAVOURS = Object.freeze({
    VANILLA: 'vanilla',
    CHOCOLATE: 'chocolate',
})

• I'm working with single file components.
• I want to access those constants both in component template and in JS code (i.e. in data()).
• I don't want them to be reactive.
• If possible, I want them to be instantiated only once (not copying each constant into each component instance).
• I don't currently use Vuex, but I'll consider it if it leads to more elegant solution.

I tried to solve my problem using mixin:

// ColorMixin.js
export const COLORS = Object.freeze({
    RED: 1,
    GREEN: 2,
})

export const ColorMixin = {
    created() {
        this.COLORS = COLORS
    }
}

Then, in my component I have to use that mixin and also the constants:

<template>
    <input name="red" :value="COLORS.RED" />
    <input name="green" :value="COLORS.GREEN" />
</template>
<script>
    import {COLORS, ColorMixin} from './ColorMixin.js'
    export default {
        mixins: [ColorMixin],
        data() {
            return {
                default_color: COLORS.RED,
            }
        }
    }
</script>

This works, but it seems kind of repetitive. Is there a more elegant solution for my problem?

Answer 1

How about just using a global mixin ?

// import your constants
Vue.mixin({
  created: function () {
    this.COLORS = COLORS;
  }
})

Answer 2

You do not just import the exported var from your Color.js file into correct SFC ?

COLORS = Object.freeze({
  RED: 1,
  GREEN: 2,
  BLUE: 3,
});
FLAVOURS = Object.freeze({
  VANILLA: 'vanilla',
  CHOCOLATE: 'chocolate',
});

export {COLORS, FLAVOURS};

and then in your SFC

<template>
  <input name="red" :value="default_color" />
</template>

<script>
  import {COLORS, FLAVOURS} from './Color.js';

  export default {
    data() {
      return {
        default_color: COLORS.RED,
        default_flavour: FLAVOURS.CHOCOLATE,
      }
    }
  }
</script>

Or just create a Vuex store to save this datas and use it directly from each SFC