I have a project where an import & component statement work to successfully get a file uploader component working.
import fileUploader from '../common/FileUploader.vue';
Vue.component('file-uploader', fileUploader);
This is in a MyOwnComponent.vue file. The file-uploader tag is used in the template section. It renders successfully within this component. So I know for a fact this is the correct way of doing it.
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');
})();
You'd think I could also make it work 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 own vue component, the name property is also set to 'my-own-component'.
But nothing renders. There is also no error feedback in my console.
What can I do to get it working?
[Update 1]
I just solved this by wrapping my tag in div#div-my-own-component and then calling:
new Vue({ el: '#div-my-own-component' });
So the problem was that, while I was registering my component, I wasn't creating a vue app.
I thought this would make my code smaller, but it only causes me to have to wrap my vue app in an extra div, which actually makes my code larger.
I'm sticking to the way I was doing it before.
[Update 2]
Ok, turns out you can create a vue app directly on the tag as well:
new Vue({ el: 'my-own-component' });
No container div needed.
