[Vue warn]: Error compiling template:

What is the error? I only see code?

@bobbybouwmann actually this code showing up in red on the console and i wonder why

@bobbybouwmann the error is

Uncaught ReferenceError: Vue is not defined

i am trying to use vue but when i do anything in my view files, i get this error. How can i initilize vue in laravel 5.6 ?

Did you include all the javascript files in your template? It looks like you're using Spark, so it should work out of the box!

Are you combining multiple nav templates from Spark? That is what I see from your short code snippet. As Bobby mentioned, it should work out of the box.

@bobbybouwmann yes i am using spark. The vue should work out of the box right. But i am including a simple vue file in resource/assets/components/sample.vue file. I do have registered it app.js file but i am unable to run a vue on my view files

my vue.js file includes

new Vue({
  el: '#hello',
  data: {
    message: 'Hello Vue.js!'
  }
})

then i registered this file in app.js

require('spark-bootstrap');

require('./components/bootstrap');

Vue.component(
    'training',
    require('./components/training.vue')
);

var app = new Vue({
    mixins: [require('spark')]
});

then i went into my view file, and i when i try to print that out, it doesnt show me anything. Please help me

<div id="hello">
           @{{ message }}
         </div>

@ejdelmonico Please help me

my console shows this

app.js?id=364c25b2b3e35b3c0b63:56942 [Vue warn]: Property or method "message" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Home>
       <Root>

@bobbybouwmann

I see nothing when i even put

<example-component></example-component>

on my view file which is provided by Laravel even after registering it on app.js

Have you checked your prop values and other data with Vue tools extension for Chrome?

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

If the correct data, props and components are present, then you can determine what is missing or if there is a display issue.

@ejdelmonico Display issue. Yes I checked it with Vue tools extension for chrome. I can get the App variable and data assoicated with that but i am unable to display it on the browser(blade file).

Did you try removing the @? Also, how did you register the component, globally in app.js or locally in another component? Additionally, I am assuming that you have run npm run dev to compile the vue components.

thanks alot friend @ejdelmonico . Finally issue has been resolved :)

@ejdelmonico

I am unable call a vue instance method. here is the test code

<div id="app2">
  <p> @{{ message }} </p>
  <button v-on:click="reverseMessage()">Reverse Message</button>
</div>

and in app.js

var app2 = new Vue({
  el: '#app2',
  data: {
    message: 'Hello Vue.js! What the heck'
  },
  methods: {
    reverseMessage: function () {
      alert('called')
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Well i can see the 'message' data but it doesnt do anything when i click on this button which is simple. I dont know why.

When I have changed in profile blade file of spark admin then show error team is not defined in console how to solve the problem?

Thanks in advance