How to display unescaped HTML in Vue.js

Vue

How to display unescaped HTML in Vue.js

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>&nbsp;rich text editor</strong> on our web application that lets the user insert formatted&nbsp;<strong>HTML&nbsp;</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&nbsp;<strong>raw HTML code</strong>&nbsp;as our&nbsp;<strong>Vue</strong>&nbsp;application would try to execute it. This is especially an issue if you want to display raw&nbsp;<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.

Show comments

Laravel

5 min

How to make Laravel authentication

Laravel provides a neat function that quickly generates a scaffold of routes, views, and controllers used for authentication.

Laravel

7 min

How to install Laravel application

This article will cover how to install and create a local development environment for your Laravel application. There are only a couple of steps that needs to be done.

Laravel

3 min

How to set appropriate Laravel permissions on Linux server

After publishing your Laravel application to a real web server, you discover then some of your functionalities are failing.

Codinary