Detailed analysis on how Vue components are automatically introduced on demand

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

Global registration

Create global components by

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

const app = createApp({})

// Global registration of a component named hello-wolrd('hello-wolrd', HelloWorld);

Once we have registered the component globally, we can use this component anywhere: <hello-wolrd/>

It is worth noting that global registration will cause Vue to lose TypeScript support, Vue 3 has onePRExtends the interface of global components. at present,Volar This usage is already supported, we can add TypeScript support for the full-parameter component by adding files to the root directory.

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

Local registration

We can directly introduce vue components from the file to use it.

In a Single File Component (SFC)

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

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

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

In JSX

import HelloWolrd from './components/'
export default {
  name: "item",
  render(){
    return (
      <HelloWolrd msg="Welcome to Your  App"/>
    )
  }
}

A partially registered component is not accessible in other components and is not available in its parent or child components, so you need to reintroduce and register the component every place where it is used.

import HelloWolrd from './components/'

But this way of directly importing components has another advantage. If the component we imported uses typescript, we can get smart prompts and type checking functions in the component without any plug-ins.

Local automatic registration

You can see that the advantages of local registration are quite obvious, but we need to repeatedly import each time we use it. However, if you have many components and your component registration code may look longer, we can use unplugin-vue-components to automatically import components on demand. It will import components on demand, but no longer require import and component registration.

This plugin will automatically generate a component used to obtain TypeScript support.

Install plug-ins

vite

// 
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})

rollup

// 
import Components from 'unplugin-vue-components/rollup'

export default {
  plugins: [
    Components({ /* options */ }),
  ],
}

webpack

// 
 = {
  /* ... */
  plugins: [
    require('unplugin-vue-components/webpack')({ /* options */ })
  ]
}

Then we can use the component in the template as usual, and it will automatically perform the following conversion

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Convert to

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

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

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

By default, it will look for components in the src/components directory. We can customize the component directory through the dirs parameter, and other configuration references/antfu/unplu…

Comparison of different solutions

About component name

There are two ways to define component names:

Using kebab-case:

('my-component-name', { /* ... */ })
When using kebab-case (Short horizontal line separation naming)When defining a component，
You must also use this custom element when referencing it kebab-case，For example <my-component-name>。

Use the camel nomenclature PascalCase

('MyComponentName', { /* ... */ })
When using PascalCase (Capital naming of the first letter) When defining a component，
Both nomenclatures can be used when you reference this custom element。
That is to say <my-component-name> and <MyComponentName>All are acceptable。
Notice，despite this，Directly in DOM (That is, a template that is not a string) Only when used kebab-case It is effective。

Therefore, we generally recommend that components adopt kebab-case naming method.

refer to

/guide/compo…

/guide/types…

/antfu/unplu…

Summarize

This is the end of this article about how Vue components are automatically introduced on demand. For more information about Vue components automatically introduced on demand, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!