VueJS () data not working

Question

I am trying to create a VueJS application, but I fail even with the simplest examples. I am using Laravel 5.3 with pre-installed VueJS support (version 1, I also tried version 2).

Here is my component Example.vue

<template>
    <div class="profile">
        {{ name }}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                name: 'John Doe'
            }
        }
    }
</script>

And here is the main code

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

const app = new Vue({
    el: '#app'
});

This is an error that appears every time in the console:

[Vue warn]: The property or method name is not specified in the instance, but is referenced during rendering. Be sure to declare the properties of the reactive data in the data option. (found in component)

Any ideas on something wrong? Thanks

Answer 1

In tags script, export defaultuse instead :

module.exports = {
  data() {
    return { counter: 1 }
  }
}

This should work for you.

Answer 2

Vue.component('example', {
  template: `<div class="profile">{{ name }}</div>`,
  data () {
return {
  name: 'John Doe'
}
  }
})

const app = new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app"><example></example></div>

Hide result

Answer 3

The problem is that you are trying to load the example component from this file, but you did not specify a name for it. You should use:

<script>
    export default {
        name: 'example',
        data () {
            return {
                name: 'John Doe'
            }
        }
    }
</script>

Or download the component as follows (not sure if the .vue extension is required):

require('./exmaple').default();

If you use Babel, you can also load components without giving them a name using this syntax:

import Example from ./example

Also check out this post for more info if you are using Babel