Register local component when using vue-property-decorator

Question

Just learning Vue and TypeScript with class based components, my single file component looks like this:

<template>
    ...
    <div>
        <contact-component v-bind:key="c.id" v-for="c in contacts">
        </contact-component>
    </div>
</template>

<script lang="ts">
import ContactComponent from "./Contact.vue";
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class ContactsComponent extends Vue {
    data() {...}
    components = { ContactComponent }
}
</script>

It generates the following error:

Unknown custom element: - did you register the component correctly?

Obviously my registration of the component does not work, but I have no idea how to fix this in TypeScript. What's the correct way to register ContactComponent so that it can be used in the above template?

Jacob Goh · Accepted Answer · 2019-08-10 03:54:35Z

13

like this


@Component({
  components: { ContactComponent }
})
export default class ContactsComponent extends Vue {}

answered Aug 10, 2019 at 3:54

Jacob Goh

20.9k5 gold badges57 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Achim Over a year ago

Are there any docs where I could have figured this out myself?

Jacob Goh Over a year ago

perhaps the example in Github. github.com/vuejs/vue-class-component/blob/master/example/src/… . it isn't explicit

Collectives™ on Stack Overflow

Register local component when using vue-property-decorator

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related