How can interpolate HTML into named params of translations with Nuxt-i18n

Question

I'm building a multilingual site with Nuxt 3. I installed Nuxt-i18n, the routing, language switching and displaying basic strings all works, but I hit a bump when trying to interpolate HTML content into my string.

So based on the docs of vue-i18n, on should use the built in <i18n> component, for these type of scenarios.

So I add this code to one of my components:

<i18n path="venue.intro-1" tag="p">
  <template v-slot:island>
     <a
       :href="$t('venue.island-link')"
       target="_blank"
       rel="noopener noreferrer"
     >
       {{ $t('venue.intro-1-island-name') }}
     </a>
  </template>
</i18n>

In my JS console I get a waning coming from Vue that

[Vue warn]: Failed to resolve component: i18n If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

And in my HTML output I get the

<i18n> tag rendered, like it was a custom HTML element, meaning that Vue's compiler just ignores it.

<i18n path="venue.intro-1" tag="p"></i18n>

I've tried importing i18n from vue-i18n, but since the package is not directly installed to my project (I can see it inside the node_modules directory, since it's a dependency of nuxt-i18n) it breaks the build.

How may I access this component while using Nuxt-i18n. Or if it's not possible, how can I achieve HTML interpolation with this module? Is it even possible?

Nuxt-i18n's documentation doesn't give me anything on this topic.

I've tried googling around but all I found is examples for adding basic variables by passing an object as the second parameter for the global $t function like so:

<p>{{ $t('venue.intro-1', { island: $t('venue.intro-1-island-name') }) }}</p>

This works in my project, but it's not what I need unfortunately.

My nuxt.config.ts looks like this:

// nuxt.conig.ts
export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' },
  },
  devtools: { enabled: true },
  postcss: {
    plugins: {
      // https://www.npmjs.com/package/postcss-nested
      'postcss-nested': {},
    },
  },
  modules: ['@nuxtjs/google-fonts', '@nuxtjs/i18n'],
  // https://google-fonts.nuxtjs.org/
  googleFonts: {
    families: {
      Bitter: {
        wght: '100..900',
        ital: '100..900',
      },
    },
    download: true,
    base64: true,
  },
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'bg', 'hu'],
    vueI18n: './i18n.config.ts',
  },
})

The i18n.config.ts looks like this:

// i18n.config.ts
import en from './translations/en.json'
import bg from './translations/bg.json'
import hu from './translations/hu.json'

export default defineI18nConfig(() => ({
  legacy: false,
  strategy: 'prefix_except_default',
  globalInjection: true,
  messages: {
    en,
    bg,
    hu,
  },
}))

Nuxt version: ^3.10.2

Vue version: ^3.4.19

Nuxt-i18n version: ^8.1.1