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.
