Agent Skills: Vue Application Structure

Structure Vue 3 applications using Composition API, component organization, and TypeScript. Use when building scalable Vue applications with proper separation of concerns.

UncategorizedID: aj-geddes/useful-ai-prompts/vue-application-structure

Install this agent skill to your local

pnpm dlx add-skill https://github.com/aj-geddes/useful-ai-prompts/tree/HEAD/skills/vue-application-structure

Skill Files

Browse the full folder contents for vue-application-structure.

Download Skill

Loading file tree…

skills/vue-application-structure/SKILL.md

Skill Metadata

Name
vue-application-structure
Description
>

Vue Application Structure

Table of Contents

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) |

Best Practices

✅ DO

  • Follow established patterns and conventions
  • Write clean, maintainable code
  • Add appropriate documentation
  • Test thoroughly before deploying

❌ DON'T

  • Skip testing or validation
  • Ignore error handling
  • Hard-code configuration values