Search code examples
vue.jsvuejs3vue-i18n

Using vue 3 vue-i18n build-in modifiers in code/template

Vue 3s' i18n plugin has build-in modifiers for (linked) messages.

 message: {
      edit: 'edit',
      editDesc: '@. capitalize:edit description'
    }

which works fine, but the problem is I couldn't find a way to use those modifiers from within a template.

For example if I want an edit button with an capitalized 'e': <button>Edit</button>

<button>
  {{ $t("edit") }}
</button>

i tried several things:

<button>
  {{ $t("edit.capitalize") }}
</button>

<button>
  {{ $t("capitalize.edit") }}
</button>

<button>
  {{ $t(":capitalize.edit") }}
</button>

but none of these worked.

Is it even possible to use those modifiers in a template/from code, or to I have to use plain js for it.

If it is possible, how?

Solution

  • The modifiers can only used in i18n config messages, I suggest to define the message with capitalized format and lower it when it used in the middle/end of sentence :

     message: {
      edit: 'Edit',
      editDesc: '@:message.edit description',
      editApprove: 'Please approve the @.lower:message.edit'
    }