In Vue we can use components through global components, local registration

Global registration

To create global components by app.com ponent

import { createApp } from 'vue'
import HelloWorld from './components/HelloWorld'

const app = createApp({})

// Globally register a component named hello-wolrd
app.component('hello-wolrd', HelloWorld);
Copy the code

Once we register the component globally, we can use the component anywhere:

It’s worth noting that global registration removes TypeScript support from Vue. Vue 3 has a PR interface that extends global components. Volar already supports this use, and we can add TypeScript support for all local components by adding the components.d.ts file to the root directory

declare module 'vue' {
  export interface GlobalComponents {
    HelloWorld: typeof import('./src/components/HelloWorld.vue') ['default']}}Copy the code

Local registration

We can import vUE components directly from files to use,

In a Single file Component (SFC)

<template>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
Copy the code

In the JSX

import HelloWolrd from './components/HelloWorld.vue'
export default {
  name: "item".render(){
    return (
      <HelloWolrd msg="Welcome to Your Vue.js App"/>)}}Copy the code

A locally registered component is not accessible in another component, either in its parent or child, so you need to reintroduce and register that component wherever it is used

import HelloWolrd from './components/HelloWorld.vue'
Copy the code

But there is another benefit to importing components directly. If we import components using typescript, we can get smart hints and type checking in components without any plug-ins

Partial automatic registration

As you can see, the advantages of local registration are obvious, but we need to import the components repeatedly each time we use them. However, if you have a lot of components, your component registration code may seem lengthy. We can use unplugin-vue-Components to automatically import components on demand. It imports components on demand, but imports and component registration are no longer required

The plugin automatically generates a component.d. ts for the components used to get TypeScript support.

Installing a plug-in

  • vite
// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */})],})Copy the code
  • rollup
// rollup.config.js
import Components from 'unplugin-vue-components/rollup'

export default {
  plugins: [
    Components({ /* options */})],}Copy the code
  • webpack
// webpack.config.js
module.exports = {
  / *... * /
  plugins: [
    require('unplugin-vue-components/webpack') ({/* options */}})]Copy the code

We can then use the component in the template as usual, and it will automatically perform the following transformations

<template> <div> <HelloWorld MSG ="Hello Vue 3.0 + Vite" /> </div> 'App' } </script>Copy the code

Converted to

<template> <div> <HelloWorld MSG ="Hello Vue 3.0 + Vite" /> </div> </template> <script> import HelloWorld from './src/components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script>Copy the code

By default, it looks for components in the SRC/Components directory. You can customize the component directory with the dirs parameter. For other configurations, see github.com/antfu/unplu…

Comparison of different schemes

Global registration Local registration unplugin-vue-components
TypeScript support definecomponents.d.tsfile The default support Automatically generatecomponents.d.tsfile
Component scope global local local
Method of use Used after global registration Use after partial registration Use after adding plug-ins

reference

  • V3.cn.vuejs.org/guide/compo…
  • V3.cn.vuejs.org/guide/types…
  • Github.com/antfu/unplu…