How to register local components with defineComponent in VueJS 3.0

user_12856173 0
Viewed 6384

VueJS 3.0 provides new syntax for defining component

(https://v3.vuejs.org/api/global-api.html#arguments-3).

import { defineComponent, ref } from 'vue'

const HelloWorld = defineComponent(function HelloWorld() {
  const count = ref(0)
  return { count }
})

How to locally register components with passing function to defineComponent?

In old style you are to use components field in component definition object like this:

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
  // ...
}
vuejs3 vue-component vue.js typescript
1 Answers

You could do it simply as before by adding that component to components option :

import ComponentA from './ComponentA.vue'

export default defineComponent({
    setup() {
        const count = ref(0)
        return { count }
    },

    components: {
        ComponentA 
    }
});

LIVE DEMO

user_81728570
Related