Sometimes, we want to render a newline character in Vue.js.

In this article, we’ll look at how to render a newline character in Vue.js.

How to render a newline character in Vue.js?

To render a newline character in Vue.js, we add the white-space: pre CSS style.

For instance, we write

<template>
  <div id="app">
    <span style="white-space: pre">Some whitespaced content</span>
  </div>
</template>

to add the white-space: pre style to the span to render the newline characters in the span text content.

Conclusion

To render a newline character in Vue.js, we add the white-space: pre CSS style.