Displaying translated messages containing HTML tags in nuxt-i18n
2024-03-04
2022-03-13
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
nuxt-i18n.config.js
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.
nuxt.config.js
import i18n from './nuxt-i18n.config'
export default {
...,
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
['@nuxtjs/i18n', i18n]
],
}
Messages
locales/en.json
{
"message": "You agree to our {0}.",
"tos": "Terms of Service"
}
locales/ja.json
{
"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.