vue-application-structure

Vue Application Structure

Overview
When to Use
Quick Start
Reference Guides
Best Practices

Overview

Build well-organized Vue 3 applications using Composition API, proper file organization, and TypeScript for type safety and maintainability.

When to Use

Large-scale Vue applications
Component library development
Reusable composable hooks
Complex state management
Performance optimization

Quick Start

Minimal working example:

// useCounter.ts (Composable)
import { ref, computed } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);

  const doubled = computed(() => count.value * 2);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initialValue;

  return {
    count,
    doubled,
    increment,
    decrement,
    reset
  };
}

// Counter.vue
<template>
  <div class="counter">
    <p>Count: {{ count }}</p>
    <p>Doubled: {{ doubled }}</p>
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Vue 3 Composition API Component	Vue 3 Composition API Component
Async Data Fetching Composable	Async Data Fetching Composable
Component Organization Structure	Component Organization Structure
Form Handling Composable	Form Handling Composable
Pinia Store (State Management)	Pinia Store (State Management)

About this skill

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T