skills.rest
Auriaz
AuriazCOMMUNITY
Explore all skills by this author →
GitHub

resource-composable-pattern

Centralize Vue API calls in composable functions with DTO typing.

Updated Aug 23, 2026
Search Tags:#refactoring#frontend#api#backend#vue#composable
One-click install
npx skills add https://github.com/Auriaz/nuxt-stack-starter --skill resource-composable-pattern
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: resource-composable-pattern
Source: https://github.com/Auriaz/nuxt-stack-starter/tree/main/.cursor/skills/resource-composable-pattern
Command: npx skills add https://github.com/Auriaz/nuxt-stack-starter --skill resource-composable-pattern

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the issue of scattered API fetching logic within Vue components, promoting a cleaner, more maintainable codebase by centralizing all frontend-backend communication.

Core Features & Use Cases

  • Centralized API Layer: Establishes app/composables/resources/ as the single source of truth for all API interactions.
  • Component Decoupling: Keeps components purely presentational, free from data fetching concerns.
  • Use Case: When adding a new feature that requires fetching user data, you would implement the fetching logic within a useUserResource composable instead of directly in the component that displays the user information.

Quick Start

Implement a new API endpoint for fetching tasks by adding a method to the useTasksResource composable.

Frequently Asked Questions about resource-composable-pattern

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I centralize API calls in Vue composables to keep components clean?▼

Centralize API calls by moving all frontend-backend communication into dedicated composable functions within `app/composables/resources/`. This keeps Vue components purely presentational by enforcing a strict pattern for data fetching and separating fetch logic from the UI.

Why should I refactor scattered API fetching logic out of Vue components?▼

Refactoring scattered API fetching logic resolves maintainability issues in your codebase. By centralizing all API interactions into a shared API client with strong DTO typing, you ensure consistent data handling and decouple data fetching concerns from your Vue components.

What is the best way to structure Vue composables for backend API interactions?▼

Structure backend API interactions by establishing a `resources/` directory as the single source of truth. Implement use cases like `useUserResource` to encapsulate fetching logic, applying strong DTO typing and error management at the form or page level.

How do I add a new API endpoint using a composable pattern in Vue?▼

Add a new API endpoint by implementing a method within a dedicated resource composable, such as `useTasksResource`. This enforces the use of a shared API client and strong DTO typing for the new frontend-backend communication, rather than fetching directly in components.

Do I need strong DTO typing when centralizing API calls in Vue composables?▼

Yes, strong DTO typing is mandated when centralizing API calls in Vue composables. It ensures consistent data handling across the shared API client and allows for effective error management at the form or page level.

When should I move existing fetch logic out of Vue components?▼

Move existing fetch logic out of Vue components when your codebase suffers from scattered API calls. Refactoring these interactions into centralized composables keeps components purely presentational and establishes a single source of truth for data fetching.

Related Skills

Explore More Software Engineering Skills→
aslaiiaslaii

fullstack-bridge

Synchronize NestJS DTOs with TypeScript interfaces and generate TanStack hooks.

Community
Intermediate
discountedcookiediscountedcookie

vue-composables

Create reusable Vue 3 composables with reactive state and async handling.

Community
Advanced
PatternsDevPatternsDev
235

container-presentational

Separate data fetching and business logic from presentation in Vue applications.

Official
Intermediate
michsindlingermichsindlinger
1

vue

Provide Vue 3 and TypeScript patterns for components, Pinia, composables, and VeeValidate.

Community
Intermediate