Creating Single Page Applications (SPAs) with Vue.js — A Complete Beginner’s Guide

📘 Chapter 4: Building Reusable Components for Your SPA

🧭 What You’ll Learn

In this chapter, you'll master how to:

• Understand the benefits of reusable components in Vue
• Create and organize components efficiently
• Pass props and emit events for communication
• Use slots for flexible layouts
• Apply global and local component registration
• Build real-world reusable components like Buttons, Cards, and Layouts

🧱 What Are Components in Vue?

Vue components are self-contained, reusable UI elements that help you break down a complex application into modular parts.

Each component can contain:

• Template: HTML markup
• Script: Component logic (JS)
• Style: Scoped or global CSS

🔁 Benefits of Reusable Components

• Maintainable codebase
• Less repetition (DRY principle)
• Easier to debug and extend
• More scalable structure
• Cleaner layouts through abstraction

📦 Component Structure Example

vue

<!-- components/MyButton.vue -->

<template>

  <button class="my-btn" @click="handleClick">

    <slot />

  </button>

</template>

<script>

export default {

  name: 'MyButton',

  emits: ['click'],

  methods: {

    handleClick() {

      this.$emit('click')

    }

  }

}

</script>

<style scoped>

.my-btn {

  padding: 10px 20px;

  background-color: #42b983;

  color: white;

  border: none;

  border-radius: 4px;

}

</style>

📁 Recommended Component Folder Structure

bash

src/

├── components/

│   ├── BaseButton.vue

│   ├── Card.vue

│   ├── Navbar.vue

│   └── Footer.vue

├── views/

│   ├── Home.vue

│   └── About.vue

🧩 Suggested Naming Convention

🛠️ Registering Components

A. Local Registration (Preferred)

vue

<script>

import BaseButton from './components/BaseButton.vue'

export default {

  components: {

    BaseButton

  }

}

</script>

B. Global Registration

main.js:

js

import BaseButton from './components/BaseButton.vue'

app.component('BaseButton', BaseButton)

🎯 Using Props

Props allow components to accept dynamic input from parent components.

Parent.vue:

vue

<UserCard :name="'Alice'" :age="30" />

UserCard.vue:

vue

<script>

export default {

  props: {

    name: String,

    age: Number

  }

}

</script>

🔁 Emitting Events

Child components can communicate back using $emit.

Child.vue:

vue

<template>

  <button @click="$emit('increment')">Add</button>

</template>

Parent.vue:

vue

<Counter @increment="count++" />

🎨 Using Slots

Slots allow you to inject custom content into a component’s template.

BaseCard.vue:

vue

<template>

  <div class="card">

    <slot />

  </div>

</template>

Usage:

vue

<BaseCard>

  <h3>Card Title</h3>

  <p>Some custom content inside the card.</p>

</BaseCard>

📚 Building Common Reusable Components

🟢 BaseButton.vue

vue

<template>

  <button :class="btnClass" @click="$emit('click')">

    <slot />

  </button>

</template>

<script>

export default {

  props: {

    variant: {

      type: String,

      default: 'primary'

    }

  },

  computed: {

    btnClass() {

      return `btn-${this.variant}`

    }

  }

}

</script>

<style scoped>

.btn-primary { background: #42b983; color: white; }

.btn-secondary { background: #ccc; color: #333; }

</style>

🟡 Card.vue

vue

<template>

  <div class="card">

    <slot name="header" />

    <slot />

    <slot name="footer" />

  </div>

</template>

<style scoped>

.card {

  border: 1px solid #eee;

  border-radius: 6px;

  padding: 20px;

  margin: 10px 0;

}

</style>

🔵 Navbar.vue

vue

<template>

  <nav>

    <router-link to="/">Home</router-link>

    <router-link to="/about">About</router-link>

  </nav>

</template>

<style scoped>

nav {

  background: #f0f0f0;

  padding: 10px;

}

nav a {

  margin-right: 10px;

  text-decoration: none;

}

</style>

🧬 Scoped vs Global Styles

🔄 Lifecycles for Reusable Components

Use lifecycle hooks like:

• mounted(): DOM loaded
• beforeUnmount(): clean-up logic
• watch(): react to prop changes

🧪 Example: Watching Prop

vue

<script>

export default {

  props: ['count'],

  watch: {

    count(newVal) {

      console.log('Count updated:', newVal)

    }

  }

}

</script>

📊 Feature Comparison Table: Props, Events, Slots

✅ Best Practices

• Use PascalCase for component names
• Keep components focused (1 task)
• Limit prop count to essential inputs
• Document props and slots in comments
• Use default props and type validation

💡 Real-World Use Cases

✅ Component Checklist