In my experience with Vue 2, I approached it in the following way:
import Component from '@/components/Component.vue';
const VueComponent = {
install(Vue, settings = {}) {
const Constructor = Vue.extend(Component);
const ComponentContainer = new Constructor();
ComponentContainer._props = Object.assign(ComponentContainer._props, settings);
const vm = ComponentContainer.$mount();
document.querySelector('body').appendChild(vm.$el);
}
}
After that, I could easily call any component method like this:
ComponentContainer.add();
Now, as I'm transitioning to creating components using Vue 3, TypeScript, and Composition API, my approach is slightly different:
import { App, createApp, Component } from 'vue';
import ComponentName from './components/ComponentName.vue';
const VueComponentName: Component = {
install(Vue: App, settings = {}) {
const ComponentContainer = createApp(ComponentName);
ComponentContainer._component.props = Object.assign(ComponentContainer._component.props, settings);
const wrapper = document.createElement('div');
const vm = ComponentContainer.mount(wrapper);
document.body.appendChild(vm.$el);
},
};
Within the component itself, I define a method called add:
export default defineComponent({
name: 'ComponentName',
setup(props, {}) {
const add = (status) => {
console.log('test')
};
return { add };
},
});
</script>
However, when trying to use this component method from the plugin, such as ComponentContainer.add();, I realize that the component instance does not have this method. What am I doing wrong?