How to resolve conflict between Vue.js and Laravel 5.4 in .blade

Question

How to resolve conflict between Vue.js and Laravel 5.4 in .blade

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

I have the following element in .blade (with the intention of interacting 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 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 syntax of the blade {{ message }} , well I can not think how to combine .blade with vue, apparently laravel offers support for this, but I could not figure out how it works.

The question is:

How to use vue.js in a .blade view of a large application?

vue.js laravel

asked by anonymous 10.03.2018 / 06:30

2 answers

2

Since the blade already uses {{ }} to display the contents of the variables, use @ to escape the keys and thus use Vue in its view with blade:

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

11.03.2018 / 03:23

How to upload data to Chunk? Git, how to move file or folder to another repository while retaining history?

score 2 · Accepted Answer

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

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

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

Link to blade tag documentation: Blade & JavaScript Frameworks