I am new to nuxt. I installed i18n to handle translations
i checked https://i18n.nuxtjs.org/docs/getting-started
my defineI18nConfig:
nuxt-app/i18n.config.ts
export default defineI18nConfig(() => ({
legacy: false,
locale: 'en',
fallbackLocale: "en",
escapeParameterHtml: false,
warnHtmlMessage: false,
messages: {
en: {
welcome: "hello dear human {\"key\": \"value\"}"
},
fr: {
welcome: "hello dear human fr"
}
},
}))
pages/index.vue
<script setup>
const { locale, setLocale } = useI18n()
</script>
<template>
<div>
<div>
<button class="btn ml-3" @click="setLocale('en')">en</button>
<button class="btn ml-3" @click="setLocale('fr')">fr</button>
<p>{{ $t('welcome') }}</p>
</div>
</div>
</template>
Error:
Message compilation error: Invalid token in placeholder: '"key":'
1 | hello dear human {"key": "value"}
My problem i have some json examples in my translations that i can not delete
i imported i18n in config,
modules: ["@nuxtjs/i18n"],
i18n: {
vueI18n: './i18n.config.ts'
}
It is possible to have json in translates or not ?
const i18n = VueI18n.createI18n({
locale: 'en',
messages: {
en: {
hello: `hello world {'{'}"key": "value"{'}'}`
}
}
})
const app = Vue.createApp()
app.use(i18n)
app.mount('#app')
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-i18n@9"></script>
<div id="app">
{{ $t('hello') }}
</div>
use {'@'}
for the placeholder