ckvv

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

Global Registration#

Create a global component using app.component.

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

const app = createApp({})

// Register a global component named hello-world
app.component('hello-world', HelloWorld);

Once we have globally registered a component, we can use it anywhere: <hello-world/>

It is worth noting that global registration will cause Vue to lose support for TypeScript. Vue 3 has a PR that extends the interface of global components. Currently, Volar supports this usage, and we can add support for global component TypeScript by adding a components.d.ts file in the root directory.

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

Local Registration#

We can directly import Vue components from files and use them.

In Single File Components (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>

In JSX:

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

Locally registered components cannot be accessed in other components, neither in their parent nor child components. Therefore, you need to import and register the component in each place where it is used.

import HelloWorld from './components/HelloWorld.vue'

However, this direct import method has a benefit. If the imported component uses typescript, we can get intelligent prompts and type checking in the component without any plugins.

Local Automatic Registration#

The advantages of local registration are obvious, but we need to repeat the import every time we use it. However, if you have many components, your component registration code may look lengthy. In this case, we can use unplugin-vue-components to automatically import components on demand. It will import components on demand without the need for import and component registration.

This plugin will automatically generate a components.d.ts file for the used components to obtain TypeScript support.

Install the plugin:

• Vite

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

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

• Rollup

// rollup.config.js
import Components from 'unplugin-vue-components/rollup'

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

• Webpack

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

Then we can use components in templates as usual, and it will automatically perform the following transformation:

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

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

Transforms 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>

By default, it will look for components in the src/components directory. You can customize the component directory using the dirs parameter. For other configurations, refer to https://github.com/antfu/unplugin-vue-components#configuration.

Comparison of Different Approaches#

References#

• https://v3.vuejs.org/guide/component-registration.html
• https://v3.vuejs.org/guide/typescript-support.html
• https://github.com/antfu/unplugin-vue-components