Allow transform the translations about vuex-i18n HOT 5 CLOSED

A short remark for other readers:
This is only the case if you put the interpolation directly into the html of your site. If you pre-compile the vue components (using webpack and vue-loader) or put the markup into a <script type="text/x-template"></script> tag, then this should not be an issue.

https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/

from vuex-i18n.

Hi @EmilianoBarbozaOjeda

Nice solution. Although I would recommend to use the vue plugin system to create custom filters that will allow you to do the uppercase / camelCase / snakeCase conversion.

// filters.js
const FiltersPlugin = {
  install: function(Vue, options) {

    // display the size of a file in human readable format
    Vue.filter('size', function(value) {

      if(value > 1048576) {
        return Math.round(value / 1048576) + ' MB';
      } else {
        // fix for non rounding toFixed
        let exact = value / 1048576;
        return (Math.round( exact * 100 ) / 100).toFixed(1) + ' MB';
      }
    });

    // capitalize a term
    Vue.filter('capitalize', function(text) {

      if (!text) {
        return null;
      }

      if (text == '') {
        return '';
      }

      return text[0].toUpperCase() + text.slice(1);
    });

  }
};

export default FiltersPlugin;

// main.js
import Filters from './filters';
Vue.use(Filters);

from vuex-i18n.

Thanks @tikiatua for your help.
I could see that the use of filters in directives were removed, so it's not really possible to do that anymore. This is the discussion where Boris explain that. vuejs/vue#5939

I cannot to this anymore
v-text="$t('personalInformation') | upperCase"

from vuex-i18n.

I see. May I ask what the reason was for you to use v-text instead of mustache interpolation {{$t('personalInformation') | upperCase}}?

from vuex-i18n.

Sure, I don't want to see that syntax when the view is been rendered. That's the case.

from vuex-i18n.