VueJS Setup in Laravel VueJS Setup in Laravel laravel laravel

VueJS Setup in Laravel


Try to use @{{message}} instead of {{message}} in your index blade. because your message is not php variable its JS framework variable. put @ sign before the variable.


If you solved the problem with sign @, but still get an error "Vue is not defined", as you said in the comment, you have a typo in your code - you should use attribute src, not scr. So the correct including of the vue.min.js should looks like that:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>

Also you can get a problem when your JS code is starting to execute before vue.min.js is loaded, try to use onload event for vue JS file:

<script onload="vueIsReady()" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script><script type="text/javascript">function vueIsReady(){      var data = {          message: 'Greetings your majesty'      };      new Vue({          el: '#app',          data: data      })}</script>

Or you can use importScript function from this: https://developer.mozilla.org/en/docs/Web/API/HTMLScriptElement

// definition of the function importScript ...// call function importScript with two parameters - script URL and onload handler functionimportScript('https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js', function(){    function vueIsReady(){      var data = {          message: 'Greetings your majesty'      };      new Vue({          el: '#app',          data: data      })    }});


If you're having problems getting to render vuejs' curly braces {{}}.@{{}} should do the trick or to make things simpleryou may consider blade's @verbatim html code {{vuejs_vars}} @endverbatim

verbatim tags in blade make sure that any between them doesnt get parsed by the blade engine & are printed as is.