vue-i18n
vue-i18n copied to clipboard
How to use named interpolation in html
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