Why is my Vue component automatically named invalidly?

Question

I have a Vue component that I just converted to class syntax. I have done this to three other components in my project with no problem. My component looks like this after reducing it to just the problematic code and no cruft:

<template>
  <v-container>
    blah
  </v-container>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'
@Component({
})
export default class extends Vue {
}
</script>

And I get this error message dynamically in the browser console.

[Vue warn]: Invalid component name: "_class2". Component names should conform to valid custom element name in html5 specification.

I obviously haven't named anything _class2 here. Vue must have done that for me. Why is the name invalid? How do I pick a valid name?

Answer 1

The class needs to have a name given to it.

export default class Foo extends Vue {

Apparently if you don't do this, it'll work just fine, but randomly give it a name that quite possibly won't work. This is a case of frameworks building on top of Javascript and not being able to report errors at the level the programmer is writing code at, but the level of the generated Javascript instead.