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

Have you tried import MyComponent from './components/MyComponent'? — Matt F.
What does MyComponent look like when you import it? Is it an actual Vue component? — Matt F.
Yep, it's an actual vue component. <template> section, <script> section that export default, all that jazz. I actually think I figured it out....doesn't look exactly right but I do have the component rendering. Only took 4 hours of looking at it... — Nick

Nick Nick · Accepted Answer · 2020-09-28T23:15:57

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.

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

1 Answers