Modular and Reusable Coding with Vue.js Single-File Components (SFC)

What will you learn in this guide?

In this guide, you will learn the Single-File Components (SFC) architecture in Vue.js projects.
We will develop clean, scalable and sustainable components with props and slot structures.

🧠 Technical Summary

This guide describes the Vue.js SFC architecture.
The goal is to break the interface codes into small pieces.
The solution is props and slot supported component structure.

---

Prerequisites

• Node.js (v14.16.0 and above)
• Vue CLI (Vue 3 selected)
• Basic knowledge of HTML, CSS and JavaScript

---

1️⃣ Preparing Project Data

cd sfc-proje/src
mkdir data
touch data/tr-havalimanlari.js
touch data/eu-havalimanlari.js

• This step creates the sample data files.

---

// data/tr-havalimanlari.js
export default [
  { name: 'İstanbul Havalimanı', abbreviation: 'IST', city: 'İstanbul', state: 'TR' },
  { name: 'Esenboğa Havalimanı', abbreviation: 'ESB', city: 'Ankara', state: 'TR' },
  { name: 'Adnan Menderes Havalimanı', abbreviation: 'ADB', city: 'İzmir', state: 'TR' }
]

• This file represents Türkiye's airports.

---

// data/eu-havalimanlari.js
export default [
  { name: 'Paris-Charles de Gaulle', abbreviation: 'CDG', city: 'Paris', state: 'Fransa' },
  { name: 'Münih Havalimanı', abbreviation: 'MUC', city: 'Münih', state: 'Almanya' }
]

• This dataset includes European airports.

---

2️⃣ Creating the First Single-File Component

<!-- src/components/AirportCards.vue -->
<template>
  <div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation" class="card">
      <p>{{ airport.abbreviation }}</p>
      <p>{{ airport.name }}</p>
      <p>{{ airport.city }}, {{ airport.state }}</p>
    </div>
  </div>
</template>

• This template shows airports as cards.

---

<script>
export default {
  name: 'AirportCards',
  props: {
    airports: {
      type: Array,
      required: true
    }
  }
}
</script>

• This structure makes the component completely reusable.

---

<style scoped>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.card {
  border: 2px solid #ddd;
  padding: 1rem;
  border-radius: 8px;
}
.card p:first-child {
  font-weight: bold;
  font-size: 1.4rem;
}
</style>

• Scoped styles only affect this component.

---

3️⃣ Sending Data with Props in App.vue

<template>
  <h2>Türkiye Uçuşları</h2>
  <AirportCards :airports="trAirports" />

  <h2>Avrupa Uçuşları</h2>
  <AirportCards :airports="euAirports" />
</template>

• This usage eliminates code duplication.

---

<script>
import &#123; ref &#125; from 'vue'
import AirportCards from '@/components/AirportCards.vue'
import trData from '@/data/tr-havalimanlari.js'
import euData from '@/data/eu-havalimanlari.js'

export default {
  components: &#123; AirportCards &#125;,
  setup() {
    const trAirports = ref(trData)
    const euAirports = ref(euData)
    return { trAirports, euAirports }
  }
}
</script>

• This code makes the data reactive.

---

Flexible Card Structure Using 4️⃣ Slots

<!-- src/components/Card.vue -->
<template>
  <div class="card-cerceve">
    <slot />
  </div>
</template>

• Slot places content dynamically.

---

<style>
.card-cerceve {
  border: 3px solid #333;
  border-radius: 8px;
  padding: 1rem;
  background-color: #f9f9f9;
}
</style>

• This style provides a general purpose card appearance.

---

<Card>
  <p>Toplam Havalimanı</p>
  <p>{{ trAirports.length }}</p>
</Card>

• This usage shows slot flexibility.

---

❓ Frequently Asked Questions (FAQ)

1. What is SFC? It is the combination of HTML, JavaScript and CSS in a single file.

2. When to use props? It is used when passing data from the parent component to the child component.

3. What does a slot do? Customizes component content externally.

4. Is this structure suitable for large projects? Yes, it is ideal for scalable architectures.

---

🎯 Result

In this guide, you learned the Vue.js Single-File Components architecture. You provided data flow with props and flexible design with slots.

You can publish the modern Vue.js applications you develop on the GenixNode infrastructure with high performance 🚀