IntlFormatted component

IntlFormatted is a component that allows you to format messages and render them as a component tree.

Props

message

Type: string | MessageFormatElement[]

This prop is used to specify the message to be formatted as a string or as an AST. If this prop is provided, the message-id prop will be ignored.

message-id

Type: string | MessageDescriptor

This prop is used to specify the message to be formatted. It should be either a string that identifies the message or an object that contains an id property, which is a string that identifies the message, and a defaultMessage property, which is the message to be formatted. If this prop is provided, the message prop will be ignored.

values

Type: Record<string, any>

This prop is used to provide values that will be used in the message. The values should be provided as an object where the keys correspond to the placeholders in the message.

Slots

The IntlFormatted component has named slots that can be used to format the message.

~[placeholder]

Scoped props: values

This slot is used to insert a value for a placeholder in the message. The name of the slot should start with a tilde (~) followed by the name of the placeholder in the message.

values scoped prop provides the access to the properties passed as :values prop to IntlFormatted component.

[tag]

Scoped props: children, values

This slot is used to format a portion of the message as a component. The name of the slot should be the name of the HTML tag that should be used to wrap the contents.

The slot receives children prop. It contains VNodes, representing the children components.

As the children are VNodes, you cannot use {{ interpolation }} and have to use Vue 3 component meta component that accepts a render function as :is property, which will simply return the children.

Example

Here's an example of how to use the IntlFormatted component:

<script setup>
const messages = defineMessages({
  greeting: {
    id: 'personal-greeting',
    defaultMessage: 'Hello, <bold>{name}</bold>! {waving_hand}',
  },
})

const user = useAuthorizedUser()
</script>

<template>
  <IntlFormatted
    :message-id="messages.greeting"
    :values="{ name: user.displayName }"
  >
    <template #bold="{ children }">
      <strong><component :is="() => children" /></strong>
    </template>
    <template #~waving_hand><Icon name="noto:waving-hand" /></template>
  </IntlFormatted>
</template>
Hello, John!

In this example we format the greeting message, which contains name and waving_hand arguments (placeholders), as well as utilises bold tag.

To do so we set message-id prop to our greeting message descriptor, as well as set values to an object containing value for name argument.

We then define two named slots:

  • bold, which will receive children (in this case text VNode, containing user's display name), and which we wrap into <strong> element.
  • waving_hand, which contains content of the argument with the same name, which is just an icon with waving hand.