2

Tenho o seguinte elemento no .blade (com a intenção de interagir com o vue não com o laravel):

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

Pra tentar ativar o vue:

window.Vue = require('vue');

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

E recebo o seguinte erro do 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)

Esse erro se dá pela sintaxe do blade {{ message }}, bom não estou conseguindo pensar em como combinar o .blade com o vue, aparentemente o laravel oferece um suporte pra isso, porém não consegui descobrir como funciona.

A duvida é:

Como usar o vue.js num .blade da view de uma aplicação laravel ?

2 Respostas 2

3

A partir do Laravel 5.3+ existe um melhoria no blade (@verbatim), pra lidar com casos aonde você irá usar muitas vezes o @{{minha_var_javascript}}

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

Assim você pode usar várias variáveis seja Vue.JS/React.JS ou outro framework javascript, sem ficar colocando o @{{my_var}} e sim apenas {{my_var}}

Link pra documentação da tag blade: Blade & JavaScript Frameworks

3

Como o blade já usa {{ }} para exibir o conteúdo das variáveis, use @ para escapar as chaves e assim usar o Vue na sua view com blade:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .