Vue3: Is it possible to register single file components using app.component(...)?

Question

Diving into vue 3, trying to add Vue to an existing asp.net core project. Since the frontend is mostly razor pages, the app isn't being mounted with a templated component that has a hierarchy of components.

const vueApp = createApp({});

What I'm trying to do:

vueApp.component('MyComponent', require('./components/MyComponent').default);

vueApp.mount('#app');

I've also tried it this way, as described in the docs:

import { createApp } from 'vue/dist/vue.esm-browser'
import MyComponent from './components/MyComponent.vue'

const vueApp = createApp({
  components: {
    MyComponent
  }
});

vueApp.mount('#app');

I've tried every version of this. requiring MyComponent.vue, with and without the default, importing MyComponent and using it that way (instead of require), none of them work. I just continue getting [Vue warn]: Failed to resolve component 'mycomponent' (Yes I did check the html coming back from the server, It's properly capitalized...not sure why the error is lower case).

MyComponent.vue looks like this:

<template>
    <lots of vanilla html>
</template>

<script>
  export default {
    name: 'MyComponent',
    data() {
      return { some: "data" }
    },
    methods: { ... },
    mounted() { ...}
}
</script>
//no component styling

Am I missing something here? Or is this no longer possible? I'm using the default vue-cli webpack config, if that matters.

Thanks

Answer 1

So, after rereading the docs (for what feels like the 10th time), I think I figured out the problem. It's actually not a Vue issue at all, it's my use of the Vue component.

In my asp.net core cshtml, I was referencing the component in PascalCase, like this:

<MyComponent />

Turns out this is a no no. By convention (enforced by the browser I guess), custom elements can only be referenced in the DOM using kebab-case, like this:

<my-component />

My vue app is still defining the component in PascalCase.

My main.js file is importing MyComponent, then passing it into the createApp options.components object.

const vueApp = createApp({
    components: {
        MyComponent
    }
});

The more you know, I guess.