I am new in vue js, I am learning ponents. I have created a basic program containing ponent. Following are my files

project/src/main.js

import Vue from 'vue'
window.Vue = Vue;

import ButtonCounter from './ponents/ButtonCounter.vue'

new Vue({
    el: '#ponents-demo',
    render: h => h(ButtonCounter)
})

project/src/ponents/ButtonCounter.vue

<template>
<div id="ponents-demo">
<button-counter></button-counter>
</div>
</template>

<script>
// Define a new ponent called button-counter
Vueponent('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
</script>

When I execute this, I get following error, even though I have declared Vue globally in main.js

I am new in vue js, I am learning ponents. I have created a basic program containing ponent. Following are my files

project/src/main.js

import Vue from 'vue'
window.Vue = Vue;

import ButtonCounter from './ponents/ButtonCounter.vue'

new Vue({
    el: '#ponents-demo',
    render: h => h(ButtonCounter)
})

project/src/ponents/ButtonCounter.vue

<template>
<div id="ponents-demo">
<button-counter></button-counter>
</div>
</template>

<script>
// Define a new ponent called button-counter
Vue.ponent('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
</script>

When I execute this, I get following error, even though I have declared Vue globally in main.js

• javascript
• vue.js

• JS modules are independent chunks of code. So if you need to use Vue in the module, you'd have to import it inside the module. – gvk Commented Sep 27, 2018 at 6:35

2 Answers 2

So it looks like you took the ponent definition and just moved to another file. If you move to another file you don't need to use Vue.ponent. You just export an object containing the data, methods, etc. that you want attached to the ponent. And inside the Vue instance you attach the imported ponent via the ponents property. I.e.

Main index.html

<div id="ponents-demo">
  <button-counter></button-counter>
</div>

Component.vue

<template>
  <button v-on:click="count++">You clicked me {{ count }} times.</button>
</template>

<script>
export default {
  data: function () {
    return {
      count: 0
    }
  }
})
</script>

Then inside your main file

import Vue from 'vue'
// window.Vue = Vue; -- don't need this anymore

import ButtonCounter from './ponents/ButtonCounter.vue'

new Vue({
    el: '#ponents-demo',
    render: h => h(ButtonCounter),
    ponents: {ButtonCounter}
})

The error is in this line

window.Vue = Vue;

Just import and create a new instance of Vue

import Vue from 'vue'
import ButtonCounter from './ponents/ButtonCounter.vue'

new Vue({
    el: '#ponents-demo',
    render: h => h(ButtonCounter)
})