Categories
Vue Answers

How to Render Newline Characters in Vue.js with JavaScript?

Spread the love

Sometimes, we want to render newline characters in our Vue.js app with JavaScript.

In this article, we’ll look at how to render newline characters in our Vue.js app with JavaScript.

Render Newline Characters in Vue.js with JavaScript

We can render newline characters in our Vue.js app with the pre tag.

For instance, we can write:

<template>
  <div id="app">
    <pre>{{ text }}</pre>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: `You can see the newline after me!\nWoohoo!`,
    };
  },
};
</script>

We have the text reactive property set to a string with a newline character.

Then we interpolate the text in the pre tag to render it as-is.

Conclusion

We can render newline characters in our Vue.js app with the pre tag.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.