Vue Application Structure

A solid foundation for structuring Vue 3 apps with Composition API and TypeScript. You get composables for common patterns like data fetching and form handling, plus a Pinia store setup and component organization conventions. The reference guides cover the basics you'd need to set up a maintainable codebase with proper separation of concerns. Honestly, this is most useful if you're starting a greenfield project or standardizing an existing team's approach. The patterns here are fairly conventional, which is good because you won't be fighting against the ecosystem. If you're already comfortable with Vue 3 architecture, you might not need this, but it's a decent quick reference for teams wanting consistent structure.

skills.sh installs: 447
GitHub stars: 379
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aj-geddes/useful-ai-prompts --skill vue-application-structure --agent claude-code

Installs into .claude/skills of the current project.

Files

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)