Vue JS Component Uncaught ReferenceError: Vue is not defined

Question

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

project/src/main.js

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

import ButtonCounter from './components/ButtonCounter.vue'

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

project/src/components/ButtonCounter.vue

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

<script>
// Define a new component called button-counter
Vue.component('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

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
– gvk, Commented Sep 27, 2018 at 6:35

Justin Kahn · Accepted Answer · 2018-09-27 06:43:58Z

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

Main index.html

<div id="components-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 './components/ButtonCounter.vue'

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

Dreft · Accepted Answer · 2018-09-27 06:43:22Z

0

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 './components/ButtonCounter.vue'

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

answered Sep 27, 2018 at 6:43

Dreft

1011 silver badge3 bronze badges

Collectives™ on Stack Overflow

Vue JS Component Uncaught ReferenceError: Vue is not defined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related