Vue Application Structure

by aj-geddes3f5182cfd739No license355 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 months ago

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

Instructions onlySoftware Development

AI-generated overview

Guides structuring Vue 3 applications with the Composition API, component organization, and TypeScript.

What it does: Provides guidance and reference material for organizing Vue 3 applications using the Composition API, TypeScript, and separation of concerns. It covers composables for state, async data fetching, and form handling, plus Pinia store patterns and component organization. A component template file is included as a starting point.
When to use it: Use it when building or refactoring larger Vue 3 applications, component libraries, or reusable composables. It is aimed at projects that need clearer file organization, state management, and type safety.
Requirements: No scripts; instructions and reference documents only. Working with the examples assumes a Vue 3 project with TypeScript and Pinia.

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:

typescript

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

// 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 [blocked]	Vue 3 Composition API Component
Async Data Fetching Composable [blocked]	Async Data Fetching Composable
Component Organization Structure [blocked]	Component Organization Structure
Form Handling Composable [blocked]	Form Handling Composable
Pinia Store (State Management) [blocked]	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

Source and attribution

Source:aj-geddes/useful-ai-promptsinskills/vue-application-structureat commit3f5182c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Vue Application Structure

Vue Application Structure

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

Source and attribution

More from aj-geddes/useful-ai-prompts

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Visual Regression Testing

User Persona Creation

User Guide Creation

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices