Specification
- Skill ID
- aj-geddes/useful-ai-prompts/vue-application-structure
- Publisher
- aj-geddes
- Repository
- useful-ai-prompts
- Installs
- 0
- Files
- 7
- Synced
- Sep 23, 2026
How to use it
Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.
aj-geddes/useful-ai-prompts/vue-application-structureInstalls these files- SKILL.md
- references/async-data-fetching-composable.md
- references/component-organization-structure.md
- references/form-handling-composable.md
- references/pinia-store-state-management.md
- references/vue-3-composition-api-component.md
- templates/component-template.tsx
What this skill tells the agent
Vue Application Structure
Table of Contents
- 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) |
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
More from aj-geddes
Use this skill in a project
Open any RiverX project, search the Skills panel for aj-geddes/useful-ai-prompts/vue-application-structure, and install it in one click.