Is there a way to control capitalization for interpolated messages?

[janhassel]

Hey, I'm wondering if there is a way to control the capitalization of interpolated messages.

Assuming the following setup:

const messages = {
  en: {
    device: 'Device',
    add: 'Add {0}',
  },
  de: {
    device: 'Gerät',
    add: '{0} hinzufügen',
  },
};

I'd intend to use it this way:

t('add', [t('device')]);

which would result in the following interpolated message:

en: "Add Device"
de: "Gerät hinzufügen"

While the de version is correct, "Device" in the en version should be lowercase ("Add device" instead of "Add Device"). Is there a way to control this in the message syntax?

I'm basically looking for something like the following (based on how it works with linked messages):

{
  add: 'Add @.lower:{0}',
}

[kazupon]

Unfortunately, the syntax of the message format syntax only supports modifiers for linked messages.
You need to make it refer to other messages as follows.

{
    "device": "Device",
    "add": "Add @.lower:{'device'}"
}

[janhassel]

Ok, so its currently not possible to have this generic format when intending to pair with a few messages but rather I'd need to create messages like this:

{
  add: 'Add',

  device: 'Device',
  connection: 'Connection',
  state: 'State',

  addDevice: '@:add @.lower:device',
  addConnection: '@:add @.lower:connection',
  addState: '@:add @.lower:state',
}

[janhassel]

If anyone else runs into this issue: I ended up just using a message function:

{
  add: ({ list }: MessageContext<VueMessageType>) => `Add ${String(list(0)).toLowerCase()}`,
}

[jonkad]

Hi,
Is it possible to use it like this: :label="$t('@.capitalize:emailAddress')" or <p>{{ $t('@.capitalize:emailAddress') }}</p> ?

[jonkad]

Hi,

Found a Solution:

en.json:

{
 "cap": "@.capitalize:{t}",
  "emailAddress": "email address"
}

:label="$t('cap', {t: 'emailAddress'})"

[sneakylenny]

I got it working in version 9.3.0-beta.27:

{
    // CRUD
    "Create": "Create",
    "Update": "Update",
    "Delete": "Delete",

    // Entity crud
    "Create entity": "@:Create @.lower:{entity}",
    "Update entity": "@:Update @.lower:{entity}",
    "Delete entity": "@:Delete @.lower:{entity}",
    
    // Entities
    "User": "User | Users",
}

And use it like this:

<template>
  <div v-text="$t('Create entity', { entity: 'User' })" />
  <div v-text="$t('Create entity', { entity: 'User' }, 2)" />
</template>

Which results in:

Create user
Create users

My code:

const i18n = createI18n<[MessageSchema], 'en-US'>({
  locale: userPreferences.value.lang ?? defaultLocale,
  fallbackLocale: 'en-US',
  messages: locales,

  legacy: false, // I use Vue 3

  // silentFallbackWarn: true,
  silentTranslationWarn: true
})

Hope this helps anyone!