Feature request: Apply modifiers to variables (named formatting)

[rahaug]

It would be really nice if the library would support modifying variables with modifiers.

const messages = {
    en: {
      // Does not work
      hello_variable: 'Hello @.upper:{name}!',
      // Does work
      hello_world: 'Hello @.upper:world!'
    }
  }

This could be handy in many scenarios, two of which I could use the feature in right now would be:

Genitive modifier
To declare possession (Given John, output: John's. Given Alex, output: Alex')

Currency Sign Placement
To declare if the currency sign ($, €, £, kr) should be placed before or after the amount ($100 vs. 100 kr)

As a workaround, I apply the filter on the data before passing it to the translator, wherever needed.
{{ $t('message.names_book', { name: genitive(firstName) }) }}

While I believe it would be more elegant if we could pass the same filter/modifier to the VueI18n instance directly, and use the modifier on variables directly in the language files.

import genitive from './filters/genitive'
import capitalize from './filters/capitalize'
// ...
const i18n = new VueI18n({
  locale: 'en',
  messages,
  modifiers: {
    genitive,
    capitalize
  }
})
// ...

I've prepared a CodeSandBox so it's easy to examine the behavior.

Please let me know if you have any questions. Keep up the great work! :)

[kazupon]

related #734

[kazupon]

we supported in Vue I18n v9.
please try it!

[timyourivh]

we supported in Vue I18n v9. please try it!

But v9 requires Vue 3