Laravel undefined variable exception with vue.js

Question

I want to test a simple vue.js in laravel blade system, Here is my code in test.blade.php view file:

<div id="app">
   <p>{{message}}</p>
</div>
 <script src="{{url('/assets/js/vue/vue.min.js')}}"></script>
 <script>
  new Vue({
    el:'#app',
    data:{
        message:"hello world"
    }
});
</script>

The problem is while rendering view file laravel wants to access the message as a variable or constant and because there is no any message variable passed to view I get Use of undefined constant exception. So what's the solution?

Sari Yono · Accepted Answer · 2016-01-28 19:29:56Z

26

add @{{message}}

that will tell blade to ignore this.

answered Jan 28, 2016 at 19:29

Sari Yono

5775 silver badges13 bronze badges

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

Comments

schellingerht · Accepted Answer · 2016-01-28 19:38:17Z

3

It's not a good approach to combine the same notation for front-end and back-end. Of course, with the @, Blade can ignore.

A much cleaner idea is to extract the front-end from back-end, because Blade and Vue.js use the same notation:

Front-end with html, css en javascript (in your case Vue.js)
Back-end (in php, Laravel in your case) as REST-api with php that returns json

The big advantages:

It's more secure
It's more maintainable
It's cleaner

answered Jan 28, 2016 at 19:38

schellingerht

5,8062 gold badges30 silver badges56 bronze badges

Collectives™ on Stack Overflow

Laravel undefined variable exception with vue.js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related