Sometimes, we want to render newline characters in our Vue.js app.
In this article, we’ll look at how to render newline characters in our Vue.js app.
Render Newline Characters in Vue.js
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.
