How to resolve conflict between Vue.js and Laravel 5.4 no. Blade

Question

I have the following element in . Blade (intended to interact with Vue not with Laravel):

<div id="app">
  {{ message }}
</div>

To try to activate Vue:

window.Vue = require('vue');

var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

And I get the following error from the Laravel:

Use of Undefined Constant message - assumed 'message' (this will throw an Error in a Future version of PHP) (View: C: xampp htdocs Laravel Game Resources views home.blade.php)

This error is due to the Blade syntax {{ message }}, well I’m not getting to think about how to combine. Blade with Vue, apparently the Laravel offers a support for this, but I could not figure out how it works.

The doubt is:

How to use Vue.js in a . Larable application view ?

Answer 1

As Lade already uses {{ }} to display the contents of the variables, use @ to escape the keys and so use Vue in your view with Blade:

<div id="app">
  @{{ message }}
</div>

Answer 2

From the Laravel 5.3+ there is an improvement in the Blade (@verbatim), to deal with cases where you will often use the @{{minha_var_javascript}}

@verbatim
<div class="container">
    Hello, {{ name }}.
</div>
@endverbatim

So you can use several variables be it Vue.JS/React.JS or another javascript framework, without putting the @{{my_var}} and yes only {{my_var}}

Link to the documentation of the tag: Blade & Javascript Frameworks