What are local and global components?

VueJunior~2 min read

Local and global components are two ways to register components in Vue.js, which determine exactly where a component can be used.

1. Global components

A global component is a component that is available throughout the whole application, without needing to import it in every file.

How is a global component registered?

In main.js:

javascript

import { createApp } from 'vue'
import App from './App.vue'
import BaseButton from './components/BaseButton.vue'

const app = createApp(App)

app.component('BaseButton', BaseButton)

app.mount('#app')

Now the <BaseButton /> component can be used anywhere:

javascript

<template>
  <BaseButton>Save</BaseButton>
</template>

Pros of global components

convenient for basic, frequently used elements (buttons, inputs, cards)
less importing in components
a good fit for your own UI kit of components

Cons

harder to tell where a component comes from
the global namespace can get "cluttered"
worse scalability for large projects (with hundreds of components, local registration is better)

2. Local components

A local component is a component that must be explicitly imported into the component where it will be used.

How is a component registered locally?

In a component:

javascript

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

<template>
  <UserCard />
</template>

In <script setup>, global registration is not needed; the import itself registers the component.

If a regular <script> is used:

javascript

<script>
import UserCard from './UserCard.vue'

export default {
  components: {
    UserCard
  }
}
</script>

Pros of local components

structures the project better -> it's clear where a component is used
no cluttering of the global namespace
suits large applications
easier to maintain, refactor, and test

Cons

must be imported manually every time
slightly more code, but in SFC/Vite this is barely noticeable

When to use global vs. local?

Global, when:

the component is used everywhere
it is a basic UI component (button, icon, input)
you are building your own UI kit

Examples:

javascript

BaseButton
BaseInput
BaseModal
AppIcon

Local, when:

the component is needed only in a specific place
it is too specific
it is not part of a UI library

Examples:

javascript

UserCard
TodoItem
LoginForm
RoadmapNode

Summary (cheat sheet)

Component type	Where available	How it's used	When to use
Global	Throughout the application	`app.component('Name', Comp)`	Frequently used basic components
Local	Only in one component	`import Comp from ''`	Most of the application's components

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.