Vue Component Registration

• In Vue.js, components can be registered globally or locally.

• Global registration with app.component() is widespread but may include unused components in the bundle.

• Local registration, using components or <script setup>, scopes components, enhancing tree-shaking.

• PascalCase is recommended for component names.

• Vue supports resolving kebab-case tags to PascalCase, offering template flexibility.

Global Registration

main.js

import { createApp } from 'vue';

const app = createApp({});

// Global Registration
app.component('MyComponent', {/* ... */});

// Chained Global Registration
app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC);

Local Registration

// Local Registration
import ComponentA from './ComponentA.vue';

// Local Registration (non-<script setup>)
import ComponentA from './ComponentA.js';

export default {
  components: { ComponentA },
  setup() {
    // ...
  }
};