Is it possible to output html instead of a string as the object value when using nuxt-i18n?

Question

It would be great if you could teach me!

en.json

{
  "HELLO_WORLD": "<p>Hello World<p>"
}

pages/index.vue

<template>
  <div>
    { $t('HELLO_WORLD') }}
  </div>
</template>

■Desired result

<div>
  <p>Hello World<p> ←　html tag
</div>

■Actual results

<div>
　　<p>Hello World<p> ←　Tags are also strings
</div>

Have you tried this https://vuejs.org/v2/guide/syntax.html#Raw-HTML ?? — Lana, Feb 07 '20 at 13:38

score 1 · Answer 1 · answered Feb 07 '20 at 14:13

1

simply replace your template by using below code:

<template>
  <div v-html="$t('HELLO_WORLD')">
  </div>
</template>

answered Feb 07 '20 at 14:13

Mahamudul Hasan

Thank you for answering! I'll try later What if I don't want to write a wrapped div? For example, react.fragment – project sixth Feb 07 '20 at 14:21
you can use – Mahamudul Hasan Feb 07 '20 at 14:22
In this case, it will be wrapped in . Is this a specification? Is there a way to write if you don't want to be wrapped in any tags? – project sixth Feb 10 '20 at 02:19
in that case just modify en.json like: { "HELLO_WORLD": "Hello World" } and use this like:

– Mahamudul Hasan Feb 10 '20 at 02:30
Certainly in this case, wrapping the
tag will solve it, thank you. But is it possible to output only the html described in the json inside without generating any tags? For example, in an html file with nothing written
– project sixth Feb 10 '20 at 06:02

1 Answers1