VueJS mustache undefined constant

Question

I was trying to make VueJS work with Laravel and something odd is happening.

My template:

<div id="tuto">
  <p>{{ texte }}</p>
</div>

My VueJS script:

var vm = new Vue({
    el: '#tuto',
    data: {
        texte: '<span>Mon texte</span>',
    }
});

I am getting this error:

Use of undefined constant texte - assumed 'texte' (View: /var/www/vhosts/xxxx/resources/views/admin/xxx/index.blade.php)

Full error here.

Does someone know where it's messing up?

Thank's

Answer 1

If you are using a .blade.php file then you need to do:

<div id="tuto">
  <p>@{{ texte }}</p>
</div>

That's because blade also uses mustaches, so they get processed by blade before vue even sees them, which is why you are receiving an error from Laravel and not from Vue.

See the Blade & JavaScript Frameworks section of the Laravel docs for more details.