Vue Local Components

Vue Local vs Global Components

When building an application, you must inform Vue about the custom components you create.

There are two ways to register components: Globally and Locally.

Understanding the difference is critical for optimizing your application's load time and bundle size.

Global Registration

Global registration makes a component available anywhere in your entire application.

You use app.component() to register them before mounting the app.

While convenient, globally registered components are included in your final JavaScript bundle even if they are never used on a specific page!

import { createApp } from 'vue'
import App from './App.vue'
import MyButton from './MyButton.vue'

const app = createApp(App)
// Available everywhere in the app
app.component('MyButton', MyButton)

Local Registration

Local registration scopes the component to the file where it is imported.

This is the recommended approach for modern Vue development.

It enables "tree-shaking", meaning unused components are stripped out of the final build, resulting in much faster load times.

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>

Local Registration Without Setup

If you are not using <script setup>, you must explicitly declare the component inside the components object.

This maps the imported file to a usable HTML tag within that specific template.

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA: ComponentA
  }
}