Escape VueJS data binding syntax in Laravel Blade? Escape VueJS data binding syntax in Laravel Blade? vue.js vue.js

Escape VueJS data binding syntax in Laravel Blade?


While asking the question I discovered that you can escape Laravel's Blade by prepending an @ sign before the double brackets {{}} or the {!! !!} html rendering brackets.

So here is the answer:

<div>  <!-- HTML rendering with VueJS -->  @{{ selectedQuestionDesc }}   <!-- Data binding with VueJS -->  @{{ selectedQuestionDesc }}</div><div>  <!-- HTML with Laravel Blade -->  {!! $selectedQuestionDesc !!}  <!-- Variable binding with Laravel Blade -->  {{ $selectedQuestionDesc }} </div>


In order to output real HTML, you will need to use the v-html directive:

<p>Using v-html directive: <span v-html="rawHtml"></span></p>