Search code examples
javascriptvue.jsjsxvuejs3tsx

How to use globally registered components in JSX/TSX without importing?

VButton has been globally registered and can be used in SFC <template> directly, how can I use it without manually importing in JSX/TSX?

// globally register `VButton`
Vue.createApp({...}).component('VButton', {...})

// 👇 have to import this, is there a way to
// use `VButton` without importing, since it's
// already registered globally.
import VButton from '@/components/VButton.vue'
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => <VButton>Click Me</VButton>
  },
})
Solution

  • Well, I didn't expect using VButton directly works out of the box after global registration.

    import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    //           👇 just use it
    return () => <VButton>Click Me</VButton>
  },
})