Displaying translated messages containing HTML tags in nuxt-i18n

With nuxt-i18n, you can create a multilingual site. Messages can be translated and displayed word by word or sentence by sentence, but in some cases, you may want to use sentences that include HTML tags such as the "a" tag.

Settings of nuxt-i18n

export default {
  locales: [
    { code: 'en', iso: 'en-US', file: 'en.json' },
    { code: 'ja', iso: 'ja-JP', file: 'ja.json' },
  ],
  defaultLocale: 'en',
  langDir: 'locales/',
}

Prepare translation files under the locales directory.

import i18n from './nuxt-i18n.config'

export default {
    ...,

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    ['@nuxtjs/i18n', i18n]
  ],
}

Messages

{
    "message": "You agree to our {0}.",
    "tos": "Terms of Service"
}

{
    "message": "{0} に同意します。",
    "tos": "利用規約"
}

Vue

<template>
    <i18n path="message" tag="p">
        <a href="/term">{{ $t('tos') }}</a>
    </i18n>
</template>

The message is embedded as a variable in the <i18n> tag.

Reference

• Basic Usage - i18n-module
• Component interpolation | Vue I18n