VueJS newline character is not rendered correctly

Question

I got the following problem, I read data string from an API which contains new line characters \\n and I want to display them correctly in my template.

But

Answer 1

Not even a vue issue you could simply use CSS and apply white-space: pre; to the content. You shouldn't need an additional package for this.

new Vue({
  el: '#app',
  data: {
    text: 'Hello Vue.\nThis is a line of text.\nAnother line of text.\n'
  }
})

.pre-formatted {
  white-space: pre;
}

  
{{ text }}