Encoding strings for Vue components

If you’re passing server side data from a Laravel Blade template into a Vue component prop, the standard {{ encoding }} structure won’t work. The HTML encoding is parsed by Vue and will break the template parsing.

<coffee-history-list
  :name='@json($cafe->name)'
>
</coffee-history-list>

Using Blade’s @json directive will escape the quotes correctly, but the prop value must be wrapped in single, not double quotes.