Vue.js show white space (line breaks)

When you split the message, you get multiple data items, which you should handle with a v-for.

But also see LMK's answer wherein you don't have to split the message.

new Vue({
  el: '#app',
  data: {
    message: `this is a message
it is broken across
several lines
it looks like a poem`
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<div id="app">
  <template v-for="line in message.split('\n')">{{line}}<br></template>
</div>

You have to transform your data before rendering it with Vue.

const lines = stringWithLineBreaks.split('\n')
// then render the lines

I can give a more specific answer if you share the code you're working with.

Set container white-space style to pre-line, as in:

<div style="white-space: pre-line;">{{textWithLineBreaks}}</div>