Rendering newline character in VueJS
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.
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 tellYou can see the newline after me!Woohoo!This way, you do not need to do any filtering of newlines.
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.