Component interpolation Support
Mykola-Veryha opened this issue · 1 comments
Mykola-Veryha commented
Does the library support Component interpolation?
https://kazupon.github.io/vue-i18n/guide/interpolation.html
Mykola-Veryha commented
Solved the issue with a MessageSlotInjector.vue component
<script>
import { h, defineComponent, ref, VNodeChild } from 'vue';
export default defineComponent({
props: ['message'],
setup(props, { slots }) {
const message = ref(props.message);
const children: Record<string, VNodeChild> = {};
for (const slotName of Object.keys(slots).filter((key) => key !== '_')) {
message.value = message.value.replace(`:${slotName}`, `<slot name="${slotName}" />`);
children[slotName] = slots[slotName]();
}
return () => h({ template: message.value }, null, children);
},
});
</script>
Example of usage
<message-slot-injector :message="$t('String :tockenName and the last word')">
<template #tockenName>
<a href="/">
{{ $t('Link') }}
</a>
</template>
</message-slot-injector>