Vue Local Components

🧩 What are Local Components?

Local components are registered within a specific parent component and only available in that scope. They help organize code and prevent global namespace pollution, making your Vue application more modular and maintainable.


import MyButton from './MyButton.vue'

export default {
  components: {
    MyButton
  }
}

Local Component Benefits

📦

Scoped Registration

Available only where registered

components: {
  MyComponent
}

🎯

No Name Conflicts

Prevents global namespace issues

// Each parent can have
// different Button
components: { Button }

⚡

Better Performance

Only loaded when needed

// Lazy loading
components: {
  Heavy: () => import('./Heavy.vue')
}

🧹

Clean Organization

Clear component relationships

// Easy to track
// component usage
components: { Card, List }

🔹 Basic Local Component Registration

Register a component locally in the parent component:

🔸 Child Component (UserCard.vue)

<template>
  <div class="user-card">
    <h3>{{ name }}</h3>
    <p>{{ email }}</p>
  </div>
</template>

<script>
export default {
  props: ['name', 'email']
}
</script>

🔸 Parent Component (App.vue)

<template>
  <div>
    <UserCard name="John Doe" email="[email protected]" />
  </div>
</template>

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

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

Output:

John Doe

[email protected]

🔹 Multiple Local Components

Register multiple components in one parent:

<template>
  <div class="dashboard">
    <Header />
    <Sidebar />
    <MainContent />
    <Footer />
  </div>
</template>

<script>
import Header from './Header.vue'
import Sidebar from './Sidebar.vue'
import MainContent from './MainContent.vue'
import Footer from './Footer.vue'

export default {
  components: {
    Header,
    Sidebar,
    MainContent,
    Footer
  }
}
</script>

🔹 Composition API Syntax

Register local components using script setup:

<template>
  <div>
    <WelcomeMessage />
    <UserProfile :user="currentUser" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import WelcomeMessage from './WelcomeMessage.vue'
import UserProfile from './UserProfile.vue'

const currentUser = ref({
  name: 'Alice',
  role: 'Admin'
})
</script>

Note: With <script setup>, imported components are automatically registered locally. No need for the components option!

🔹 Component Name Variations

Different ways to name and use local components:

<template>
  <div>
    <!-- PascalCase (recommended) -->
    <MyButton />
    
    <!-- kebab-case -->
    <my-button />
    
    <!-- Both work the same -->
  </div>
</template>

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

export default {
  components: {
    MyButton,
    // Or rename it
    'custom-button': MyButton
  }
}
</script>

🔹 Lazy Loading Components

Load components only when needed for better performance:

<template>
  <div>
    <button @click="showModal = true">Open Modal</button>
    <HeavyModal v-if="showModal" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  },
  components: {
    // Lazy load - only loads when needed
    HeavyModal: () => import('./HeavyModal.vue')
  }
}
</script>