Markups

vue-mf2 supports built-in markups and custom markups via createMf2({ markups }).

Built-in markups

bold

Message:

{
  "label": "Please {#bold}read this{/bold}."
}

Default render: <strong>...</strong>

Preview

Please read this.

italic

Message:

{
  "label": "This is {#italic}important{/italic}."
}

Default render: <em>...</em>

Preview

This is important.

link

Message:

{
  "help": "Need help? {#link to=|/help|}Open docs{/link}"
}

Default render: <a :href="options.to">...</a> (falls back to #)

Preview

Need help? Open docs

underline

Message:

{
  "label": "Use {#underline}underlined{/underline} text."
}

Default render: <u>...</u>

Preview

Use underlined text.

code

Message:

{
  "label": "Run {#code}npm run build{/code}."
}

Default render: <code>...</code>

Preview

Run npm run build.

mark

Message:

{
  "label": "This is {#mark}highlighted{/mark}."
}

Default render: <mark>...</mark>

Preview

This is highlighted.

Override built-ins

You can override any built-in markup name.

import { createMf2, Mf2Bundle } from 'vue-mf2';

const mf2 = createMf2({
  locale: 'en-US',
  bundles: [new Mf2Bundle('en-US').addResource({ text: 'Use {#bold}brand{/bold} style.' })],
  markups: {
    bold: ({ children }) => <span class="brand-bold">{children}</span>
  }
});

Preview

Use brand style.

Add custom markups

Use any new markup name in messages and provide a renderer in markups.

import { createMf2, Mf2Bundle, type MarkupRenderer } from 'vue-mf2';

const pill: MarkupRenderer = ({ children }) => <span class="pill-markup">{children}</span>;

const mf2 = createMf2({
  locale: 'en-US',
  bundles: [
    new Mf2Bundle('en-US').addResource({
      text: 'Custom {#pill}markup{/pill} works.'
    })
  ],
  markups: {
    pill
  }
});

Preview

Custom markup works.

Slots vs renderers

• Use markups when you want global rendering behavior by markup name.
• Use <mf2-t> slots when you want per-call/per-component rendering behavior.
• See Message Parts for slot-based rich message rendering examples.