How to encode newlines?

[LifeIsStrange]

This is an extremely basic use case and the solution is non-obvious.
I would like to replace this:

<p> first line<br />
    second line</p>

by

<p>{{ $t("newLineExample") }}</p>

where newLineExample refer a JSON key that in english equal: "first line
second line"
I have tried replacing br with \n, or even
none of those solutions works.

[kazupon]

You can do this by changing the line breaks in the Translation component and locale messages to look like this:

locale messages (JSON resource):

{
  "oneline": "first line{newline}second line'"
}

Translation component:

      <i18n-t tag="p" keypath="oneline">
        <template #newline><br /></template>
      </i18n-t>

the break line in the resources of locale messages are not very desirable for localization and maintenance considerations.
I recommend defining "first line" and "second line" as separate keys in the locale resources and implementing them as follows:

locale messages (JSON resource):

{
  "first": "first line",
  "second": "second line'"
}

<p>{{ $t('first') }}<br />{{ $t('second') }}</p>

[LifeIsStrange]

Thanks for the elaborate answer!
Well to be honest there is a solution I much prefer, which is to include \n in the translation key and to use CSS pre-wrap.
You mention that encoding newline character might not be desirable in translations which is interesting. I have no experience as to when that would be an issue.

But it's nice to know there are alternatives when pre-wrap can for some reason, not be used!

[rvanlaak]

For a header component we have no inner html on page A where we do use that same header component on page B that does have html.

How would this work for components for which you are not aware of how much html their translation has?