Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

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?

share|improve this question
up vote 3 down vote accepted

add @{{message}}

that will tell blade to ignore this.

share|improve this answer
    
Thanks a lot, the problem has been solved. – Tohid Dadashnejad Jan 28 at 19:31
    
no problem Good Luck. – Sari Yono Jan 28 at 19:32

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
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.