In one of my projects, I successfully implemented a file uploader component using import and component statements.
import fileUploader from '../common/FileUploader.vue';
Vue.component('file-uploader', fileUploader);
This implementation is in MyOwnComponent.vue where the file-uploader tag is used in the template section and renders successfully within this component. So, I am confident that this is the correct approach.
Now, I want to use the MyOwnComponent.vue file on a .cshtml page.
The script I currently have to make it work successfully is:
import cmpMyOwnComponent from '../vue/cmpMyOwnComponent.vue';
window.MyOwnComponent = (function(){
let vueApp = Vue.extend(cmpMyOwnComponent);
return new vueApp().$mount('#my-own-component');
})();
I thought I could achieve the same by changing the extend/mount calls to:
Vue.component('my-own-component', myOwnComponent);
And then using a tag on the .cshtml page:
<my-own-component></my-own-component>
In my vue component, the name property is also set to 'my-own-component'.
However, nothing gets rendered and there are no error messages in the console.
How can I resolve this issue?
[Update 1]
I was able to solve this problem by wrapping my component tag in div#div-my-own-component and then calling:
new Vue({ el: '#div-my-own-component' });
The key issue was that even though I registered my component, I failed to create a vue app instance.
Initially, I believed this approach would lead to more concise code, but ultimately, I had to include an extra div wrapper, adding complexity instead of reducing it.
Therefore, I have decided to stick with my previous method.
[Update 2]
Interestingly, it is possible to create a vue app directly on the tag as well:
new Vue({ el: 'my-own-component' });
No additional container div is required.