Learn Vue - Architecture & Design Patterns

#Introduction

Code that works today won't necessarily survive a year. As features grow and teams get bigger, architecture quality decides whether changes are cheap or expensive. Good architecture organizes complexity — it doesn't eliminate it.

Episode 18 covers how to structure a Vue application for large scale: layered architecture, feature-based folder structure, design systems and component libraries, and separating logic, UI, and service so each part can evolve on its own.

#Large-Scale Application Architecture

#Separating by Responsibility

A healthy Vue application has clear layers:

view: komponen dan template
logic: composables dan state
service: komunikasi dengan API
data: model dan transformasi

Views only render; logic is held by composables; services handle networking; data defines the model shape. When one layer changes, the others don't fall apart.

#Feature-Based Folder Structure

#Structure per Feature

Instead of grouping by file type, group by feature:

src/features/
  auth/
    components/LoginForm.vue
    composables/useLogin.js
    services/authApi.js
    views/LoginView.vue
  produk/
    components/ProductCard.vue
    services/produkApi.js

Each feature is self-contained: components, logic, services, and pages live in one folder. A feature can be developed, tested, and removed without touching other features — this is the essence of domain-driven design for frontend.

#Design Systems and Component Libraries

#Design Tokens

A design system starts with tokens: colors, spacing, and typography in a single source of truth.

Design token

export const tokens = {
  warna: {
    primer: "#3b82f6",
    teks: "#1f2937",
    latar: "#ffffff",
  },
  spacing: { kecil: 4, sedang: 8, besar: 16 },
};

tokens.warna.primer is used by every component, so a brand change only requires editing one file. Base components like BaseButton read these tokens for consistency.

#A Reusable Component Library

Reuse base components with controlled props:

BaseButton

<script setup>
defineProps({
  variant: { type: String, default: "primer" },
  disabled: { type: Boolean, default: false },
});
</script>
 
<template>
  <button class="btn" :class="`btn-${variant}`" :disabled="disabled">
    <slot />
  </button>
</template>

BaseButton unifies styling and behavior. Variations go through the variant prop, not by copying styles each time.

#Cleanly Separating Logic, UI, and Service

#Service for the API

All network calls are collected in the service layer:

Service produk

export const produkApi = {
  async daftar() {
    const res = await fetch("/api/produk");
    return res.json();
  },
  async detail(id) {
    const res = await fetch(`/api/produk/${id}`);
    return res.json();
  },
};

produkApi.daftar() wraps an endpoint. Components don't need to know the fetch details; the service can be swapped for GraphQL or a mock without changing the view.

#Composable for Logic

A composable turns raw data into state ready to display:

Composable useProduk

import { ref } from "vue";
import { produkApi } from "./produkApi";
 
export function useProduk() {
  const list = ref([]);
  const loading = ref(false);
 
  async function muat() {
    loading.value = true;
    list.value = await produkApi.daftar();
    loading.value = false;
  }
 
  return { list, loading, muat };
}

The view just calls useProduk() and renders list; logic and state can be tested without a browser.

#Thin Views

View yang tipis

<script setup>
import { useProduk } from "../composables/useProduk";
 
const { list, loading, muat } = useProduk();
muat();
</script>
 
<template>
  <div v-if="loading">Memuat...</div>
  <ProductCard v-for="item in list" :key="item.id" :produk="item" />
</template>

A thin view loads a composable, calls its action, and renders. All business decisions live in the logic layer, keeping the UI easy to read and test.

#Summary

Episode 18 structured your application for growth: layered view-logic-service-data architecture, feature-based folder structure, a design system with tokens and base components, and clean separation that lets each layer evolve independently.

Key takeaways:

• Separate view, logic, service, and data.
• Group code by feature, not by file type.
• Design tokens are the single source of visual truth.
• Base components unify the UI.
• Services wrap the API, composables wrap the logic.
• Thin views are easy to read and test.

In the next episode 19, we'll cover modern tooling and build automation — Vite as a high-performance bundler, TypeScript integration, CI/CD pipelines for Vue applications, plus linting, formatting, and pre-commit hooks.