How to have all the static strings in one place

Question

I am creating a vue webapp, I have few pages with Dynamic content and also few pages which has mostly static content. I want to move all these static strings to one place.

One option can be to use vue-i18n or vue-multilanguage, these gives support to have content files like this, but I really have no use case of support of multiple languages, so it also seems a bit over kill to me.

Another option can be to have a vuex store for all the strings, vuex I am already using for state management.

What can be good approach to do this.

Answer 1

I am not aware of a standard way of doing this, also this would be applicable to all the web frameworks. That said it is an interesting and valid problem.

If I had to do something about it:

1. I would want these strings to be available everywhere.
2. I would prefer not having to import these strings in all the components and each time I needed to use them.
3. I would want the storage space to be descriptive so that I don't have to go back and forth to check what I want to import. [The toughest part in my opinion]

To achieve 1, we can use:

1. Vuex
2. A services/some.js file which exports an object.
3. Plugins

I would go with plugins because:

I can get the strings by merely using this in a component, Vue.use(plugin) prevents the same plugin getting used twice, and at the same time achieve all the points (3rd will still be a tough nut to crack). Only disadvantage that I know of it might clutter the vue-instance.

So plugin can be designed like:

// stringsHelperPlugin.js
const STRING_CONST = {
  [component_1_Name]: {
    key1: val1,
    key2: val2,
    ....
  },
  [component_2_Name]: {
    key1: val1,
    key2: val2,
    ....
  },
  ...
}

StringConst.install = function (Vue, options) {
  Vue.prototype.$getStringFor = (componentName, key) => {
    return STRING_CONST['componentName'][key]
  }
}

export default StringConst

in main.js this can be used like:

import StringConst from 'path/to/plugin'

Vue.use(StringConst)

and you could use this in a component template like so:

<div>
 {{ $getStringFor(<component_1_name>, 'key1') }}
</div>

You can use something like this.$getStringFor(<componentName>, key) in a method. Pretty much everything that vuejs to has to offer.

Why I call the 3rd point hardest is: Maintainance if you ever change component names, you might also have to change it in the object returned by the plugin. This problem again, can be handled in many ways.