Feature: Vue - Custom tag for ReI18n component

[nasvillanueva]

Overview

vue-i18n <I18nT> component supports a tag prop that wraps the translated message with the provided tag. It also supports fallthrough attributes.

Current usages that we have always have a wrapper.

<p class="prose text-gray-500" data-testid="test">
  <ReI18n msg="Hello World" />
</p

<!-- Renders -->
<p class="prose text-gray-500" data-testid="test">
  Hello World
</p>

If we support the tag prop, we can have something like this:

<ReI18n msg="Hello World" as="p" class="prose text-gray-500" />

<!-- Renders -->
<p class="prose text-gray-500" data-testid="test">
  Hello World
</p>

I used as instead of vue-i18n's tag prop since it feels nicer to read. I got it from HeadlessUI's containers.

By default, we can still render just a text node.

References

• https://vue-i18n.intlify.dev/guide/advanced/component.html tag prop
• https://headlessui.com/vue/transition#transition-root as prop

[ChillyBwoy]

I suppose that as should be optional. If it is not specified, <ReI18n /> is displayed as a <template> tag.

[nasvillanueva]

Exactly! I wasn't just sure whether you actually use <template> tag. I quickly looked at the component source code, couldn't find <template> tag. If it's there, I must be blind 😅