Rendering newline character in VueJS

Use white-space: pre-line; CSS property.

As write in Mozzila Doc for pre-line value:

Sequences of white space are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

Wrap the content in a pre element.

A <pre> element will preserve whitespace within it, eg:

This is followed by a newline,
not that you can tell
<br />
<br />
<pre>You can see the newline after me!
Woohoo!</pre>

Will result in:

This is followed by a newline, not that you can tell

You can see the newline after me!
Woohoo!

This way, you do not need to do any filtering of newlines.

As @shelvacu said the <pre> html tag preserves whitespaces.

However using it has one serious disadvantage: the tag itself inherits plenty of unnecessary styling from CSS frameworks that are used in project (e.g. Bootstrap).

To preserve whitespaces and avoid inheriting any unnecessary styles use:

<span style="white-space: pre;">Some whitespaced content</span>

what will act exacly like the <pre> tag.

Be aware that white-space: pre remains text 'as it is' - if you would like to have additional line break when it's necessary use: white-space: pre-wrap.

See: w3schools.com CSS white-space Property