Single-File Components (SFCs) and global components differ in scope and structure. SFCs define components in .vue files with encapsulated templates, scripts, and styles, while global components are registered once and accessible throughout the application.
What is the difference between single-file components and global components?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
Vue components can be created as Single-File Components (SFCs) or Global Components. Both define reusable UI pieces, but they differ in organization, scope, and how they are registered within a Vue application.
Single-File Components (SFCs)
Single-File Components are stored in .vue files and include three main sections — <template>, <script>, and <style>. They provide a modular, maintainable way to build complex applications.
HTML
<!-- UserCard.vue -->
<template>
<div class="user-card">
<h2>{{ name }}</h2>
<p>{{ email }}</p>
</div>
</template>
<script>
export default {
props: ['name', 'email']
};
</script>
<style scoped>
.user-card { border: 1px solid #ddd; padding: 10px; }
</style>
SFCs promote better organization by separating structure, logic, and styling within a single file while keeping them tightly coupled for easier maintenance. They are registered locally within the parent component or automatically via file-based routing tools like Vite or Nuxt.
JAVASCRIPT
// App.vue
<template>
<UserCard name="Mina" email="mina@example.com" />
</template>
<script>
import UserCard from './UserCard.vue';
export default { components: { UserCard } };
</script>
Global Components
Global components, on the other hand, are registered once in your app’s entry point (usually main.js) and can be used anywhere without importing them explicitly.
JAVASCRIPT
// main.js
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 in any template throughout the app without the need for imports.
HTML
<!-- AnyComponent.vue -->
<template>
<BaseButton>Click Me</BaseButton>
</template>
Aspect | Single-File Components (SFCs) | Global Components |
|---|---|---|
Definition | Components defined in .vue files with template, script, and style sections | Components registered globally via app.component() |
Scope | Available only in components where imported | Available everywhere in the app |
Usage | Locally registered and explicitly imported | Globally available without import |
Organization | Encourages modularity and reusability | Useful for shared UI elements like buttons or modals |
Performance | Scoped registration reduces memory overhead | Can increase bundle size if overused |
When to Use Each
- Use SFCs for application-specific, modular, and reusable components that benefit from encapsulation.
- Use Global Components for shared UI elements like buttons, icons, or form fields that appear across multiple views.
Think of global components as public utilities — accessible everywhere but should be used sparingly, while SFCs are private blueprints — focused and modular for specific tasks.
Summary
Summary
- SFCs are defined in
.vuefiles and locally registered for better modularity. - Global components are registered once and accessible throughout the app.
- Use SFCs for maintainable large-scale apps, and global components for common UI building blocks.
Similar questions
Guides