VueJS newline character is not rendered correctly
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;}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script><div id="app"> <div class="pre-formatted">{{ text }}</div></div>
Use the <pre></pre> tag to preserve the preformated text. More info MDN Pre tag docs
new Vue({ el: '#app', data: { text: 'Hello, \n what\'s up? \n My name is Joe' }})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script><div id="app"> <pre>{{ text }}</pre></div>
I was facing same issus i was using vue-nl2br
check it here
Install
npm install --save vue-nl2brUsage
import Nl2br from 'vue-nl2br'Vue.component('nl2br', Nl2br)View
<nl2br tag="p" :text="`myLine1\nmyLine2`" />result :
<p>myLine1<br>myLine2</p>