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.

Answer 2

There are two ways going about that.

1: Use the @ before the mustaches.

Example:

@{{ texte }}

---

2: The other one is to use the @verbatim directive over a code block.

Example:

@verbatim
    {{ texte }}
@endverbatim

https://laravel.com/docs/5.4/blade#blade-and-javascript-frameworks

Answer 3

data must be a function:

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