Often times we have a rich text editor on our web application that lets the user insert formatted HTML code and store it in the database as such. This can be seen on blogs, such as this one, webshops for product descriptions, etc.
We can quickly run into issues if we were to just print out the raw HTML code as our Vue application would try to execute it. This is especially an issue if you want to display raw Vue code like below.
This would be stored as the content of our article in the database.
<p>Often times we have a<strong> rich text editor</strong> on our web application that lets the user insert formatted <strong>HTML </strong>code and store it in the database as such. This can be seen on blogs, such as this one, webshops for product descriptions, etc.</p>
<p>We can quickly run into issues if we were to just print out the <strong>raw HTML code</strong> as our <strong>Vue</strong> application would try to execute it. This is especially an issue if you want to display raw <strong>Vue</strong> code like below.</p>
This is how we would call it.
<div id="body-wrap">
{!! $article->content !!}
</div>
Vue would raise multiple errors over this, from undefined properties and methods to component registration. In order to solve this issue, we can use v-pre directive. This will tell Vue to skip compilation on this element and elements inside it and just print out the raw content.
<div id="body-wrap" v-pre>
{!! $article->content !!}
</div>
Awesome, isn't it.