I'm trying to create a Component instance:
App.vueimport MyComponent from './components/MyCompnent.vue';
export default {
mounted() {
// The following line fails.
const vm = new MyComponent();
vm.$mount('#some-place');
}
}
and the new line reports an error:
Uncaught TypeError: MyComponent.default is not a constructor
So how if I want to create the component?
Finally, I found the solution myself, very simple:
The Component imported itself is not a constructor, but we can easily make a constructor:
import MyComponent from './components/MyCompnent.vue';
const MyComponentConstructor = Vue.extend(MyComponent);
So the final solution is:
import MyComponent from './components/MyCompnent.vue';
export default {
mounted() {
const MyComponentConstructor = Vue.extend(MyComponent);
const vm = new MyComponentConstructor();
vm.$mount('#some-place');
}
}
Following is the way to register a component inside other component:
export default {
el: '#some-place'
components: {
'my-component'
}
}
Documentation: link
If you want to initialise the vm instance, you can do it using Vue.extend. What is does is:
Create a “subclass” of the base Vue constructor. The argument should be an object containing component options.
and one point to note here is:
The special case to note here is the data option - it must be a function when used with Vue.extend().
You need to make changes similar to following in your code:
import MyComponent from './components/MyCompnent.vue';
const vmClass = Vue.extend(MyComponent)
const vm = new MyComponent();
vm.$mount('#some-place');
new Vue() returns.Try this
Script :
import MyComponent from './components/MyCompnent.vue';
export default {
name : 'comp',
components :{
MyComponent
}
}
Html You can call your component in html like this
<template>
<mycomponent></mycomponent>
</template>
new Vue() returns.
<my-component></my-component> because it is camel-cased.