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?

Answer 1

add @{{message}}

that will tell blade to ignore this.

Answer 2

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