How to use named interpolation in html

[HuangKaiSong]

Reporting a bug?

How to pass using named interpolation？

Here's an example:

The Named interpolation:

message: Are you sure you want {status} {title}?

<template>
  <custom />
</template>

<script setup lang="ts">
import { defineComponent, h } from 'vue';
import { Translation as I18nT } from 'vue-i18n';

const Custom = defineComponent({
  name: 'Custom',
  render() {
    return h(I18nT, { keypath: 'message', scope: 'global' }, () => [
      h('strong', null, () => 'disable'), // status
      h('strong', { style: 'color:var(--el-color-primary)' }, () => 'xiaoming'), // title
    ]);
  },
});
</script>

Expected behavior

value can be passed

Reproduction

https://stackblitz.com/edit/vitejs-vite-93fknb?file=src%2FApp.vue

System Info

System:
    OS: macOS 13.5
    CPU: (8) arm64 Apple M2
    Memory: 98.47 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.21 - /usr/local/bin/yarn
    npm: 8.19.4 - /usr/local/bin/npm
    pnpm: 8.7.6 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 122.0.6261.69
    Safari: 17.0
  npmPackages:
    @intlify/unplugin-vue-i18n: ^1.4.0 => 1.4.0 
    @vitejs/plugin-vue: ^4.3.4 => 4.3.4 
    @vitejs/plugin-vue-jsx: ^3.0.2 => 3.0.2 
    @vue/eslint-config-prettier: ^8.0.0 => 8.0.0 
    @vue/eslint-config-typescript: ^12.0.0 => 12.0.0 
    vite: ^4.4.9 => 4.4.9 
    vite-plugin-cdn-import: ^0.3.5 => 0.3.5 
    vite-plugin-compression: ^0.5.1 => 0.5.1 
    vite-plugin-mock: 2.9.6 => 2.9.6 
    vite-plugin-remove-console: ^2.1.1 => 2.1.1 
    vite-svg-loader: ^4.0.0 => 4.0.0 
    vue: ^3.3.4 => 3.3.4 
    vue-eslint-parser: ^9.3.1 => 9.3.1 
    vue-i18n: ^9.5.0 => 9.5.0 
    vue-json-pretty: ^2.2.4 => 2.2.4 
    vue-pdf-embed: ^1.2.1 => 1.2.1 
    vue-router: ^4.2.5 => 4.2.5 
    vue-tippy: ^6.3.1 => 6.3.1 
    vue-tsc: ^1.8.15 => 1.8.15 
    vue-types: ^5.1.1 => 5.1.1 
    vue-virtual-scroller: 2.0.0-beta.8 => 2.0.0-beta.8 
    vue-waterfall-plugin-next: ^2.2.4 => 2.2.4 
    vue3-danmaku: ^1.6.0 => 1.6.0 
    vuedraggable: ^4.1.0 => 4.1.0

Screenshot

No response

Additional context

No response

Validations

• [X] Read the Contributing Guidelines
• [X] Read the Documentation
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] Check that this is a concrete bug. For Q&A open a GitHub Discussions

[kazupon]

You can the below:

<template>
  <custom />
</template>

<script setup lang="ts">
import { defineComponent, h } from 'vue';
import { Translation as I18nT } from 'vue-i18n';

const Custom = defineComponent({
  name: 'Custom',
  render() {
    return h(I18nT, { keypath: 'message', scope: 'global' }, [{
      status: () => h('strong', null, () => 'disable'), // status,
      title: () => h('strong', { style: 'color:var(--el-color-primary)' }, () => 'xiaoming'), // title
    }]);
  },
});
</script>

references:

• vue render function: https://vuejs.org/api/render-function.html#h
• vue-i18n translation component docs: https://vue-i18n.intlify.dev/guide/advanced/component.html

Thanks!