I can't use my data variable with VueJS and Laravel

Question

I want to show a message on my page with VueJS, but Laravel doesn't want to show it and sends me an error message :

Use of undefined constant message - assumed 'message' (this will throw an Error in a future version of PHP)

My index.blade.php :

<a v-bind:href="link"> {{ message }} </a>

My app.js :

new Vue({
    el: '#app',
    data: {
        message: 'Hello world',
    }
});

HeySora · Accepted Answer · 2020-08-23 09:15:18Z

6

Your error appears because Laravel Blade tries to parse {{ message }} as PHP code. Laravel Blade and VueJS are sharing the same {{ }} syntax for showing variables.

In order to tell Blade that your {{ message }} is not PHP code, you either need to do this :

<a v-bind:href="link"> @{{ message }} </a>

or, if you have lots of VueJS code, you can surround your HTML with this :

@verbatim
    <a v-bind:href="link"> {{ message }} </a>
@endverbatim

Reference

edited Aug 23, 2020 at 9:15

answered Aug 23, 2020 at 9:10

HeySora

9269 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Valentin Leguy Over a year ago

Isn't work too it's write {{ message }} instead of hello world :'(

HeySora Over a year ago

@ValentinLeguy Make sure your <a> tag is indeed inside an element with the ID #app, as you defined in app.js

milad hedayatpoor · Accepted Answer · 2020-08-23 10:08:44Z

1

<a v-bind:href="link"> @{{ message }} </a>

answered Aug 23, 2020 at 10:08

milad hedayatpoor

6444 silver badges15 bronze badges

Collectives™ on Stack Overflow

I can't use my data variable with VueJS and Laravel

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related