Rendering newline character in VueJS

Question

I\'m creating a note app where users can add a note by entering multiline text in a textarea. When I save the note in Firebase it is being saved with newline (\\n) character

Answer 1

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;
}