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.

See: w3schools.com CSS white-space Property

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.

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.

After actually describing my problem I got the idea the use the pre-tag which is for preformatted text. This tag will respect '\t\n' characters and render the text correctly out of the box! Though the sentences don't get broken automatically and overflow the width. With some CSS I was able to get the same behaviour that other elements have.

html:

{{note.content}}

css:

.note pre {
  white-space: pre-wrap; 
  word-wrap: break-word;
  font-family: inherit;
}

Hope this would add value to new visitors.

Input from User.

I am big line with lots and lots of text which would make me not fit.

Line two ✌ 
Line three

Best Approach for output

<span style="white-space: pre-line">Your Content</span>

Problems with other approach

<span style="white-space: pre">Your Content</span>

Will result in addition of a scroll on y-axis

Reference & More details: https://css-tricks.com/almanac/properties/w/whitespace