CODEWITHSUNDEEP
vue.jsvuejs3vue-i18n
TheDoctor
TheDoctor

Reputation: 2522

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?

Upvotes: 1

Views: 1439

Answers (3)

AzJa
AzJa

Reputation: 121

I have the same issue. As a workaround I use temporary linked message:

message: {
  tmp: 'Actual text',
  content: "@.lower:tmp"
}

And then in the template:

<p>{{ $t('message.content') }}</p>

It's ugly tho...

Upvotes: 0

Rory
Rory

Reputation: 2516

I found it easiest to modify this in the template using plain JavaScript String methods. It has been more useful in my experience to store the message strings capitalized, then use the toLowerCase method.

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

Upvotes: 2

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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'
    }

Upvotes: 2

Related Questions