vue-create-api-service

Create typed Vue 3 API service classes using a centralized Axios httpClient.

1|Updated Mar 18, 2026
One-click install
npx skills add https://github.com/bmslabs/bmlabs-projects-templates --skill vue-create-api-service
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vue-create-api-service
Source: https://github.com/bmslabs/bmlabs-projects-templates/tree/main/view-vuejs/.github/skills/vue-create-api-service
Command: npx skills add https://github.com/bmslabs/bmlabs-projects-templates --skill vue-create-api-service

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Implement a data transport layer for Vue apps using typed static classes that consume a centralized httpClient, enabling consistent API interaction with automatic token injection and error handling.

Core Features & Use Cases

  • Centralized httpClient integration (Bearer token from sessionStorage) and automatic 401 redirect
  • Static-class API services per entity with private BASE_URL and static async methods
  • Strongly typed DTOs and paginated responses, aligned with OpenAPI endpoints
  • Encourages reuse of base URLs and constants to avoid duplication across services

Quick Start

Invoke the generator with /B [Entity] to create the API service for that entity.

Frequently Asked Questions about vue-create-api-service

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

FAQPage Schema
How do I create typed API services in Vue 3 with a centralized httpClient?

You create typed API services as static classes that consume a centralized httpClient for consistent data transport. This enforces strongly typed DTOs and paginated responses aligned with your OpenAPI endpoints.

What is the best way to handle authentication and errors in Vue Axios interceptors?

The best way to handle Vue Axios interceptors is through a centralized httpClient that injects Bearer tokens from sessionStorage and automatically redirects on 401 errors. This ensures consistent authentication and error handling across all static-class API services.

Can I generate TypeScript DTOs for paginated API responses from an OpenAPI specification?

Yes, you can generate TypeScript DTOs for paginated API responses by ensuring endpoints exist in the OpenAPI specification. The static-class API services enforce these typed DTOs and paginated responses without direct axios usage.

Does this API service pattern require direct Axios usage inside Vue components?

No, this API service pattern enforces a strict transport-only approach without direct axios usage other than the centralized httpClient. Static-class methods handle data transport, ensuring the final URL is correctly composed from baseURL and path.

How do I avoid duplicating baseURL and endpoint constants across multiple Vue API services?

You avoid duplicating baseURL and endpoint constants by defining private BASE_URL within static-class API services and encouraging reuse of base URLs and constants. This ensures the final URL is correctly composed from baseURL and path.

When do I need a centralized httpClient with static-class API services for Vue?

You need a centralized httpClient with static-class API services when implementing a data transport layer for Vue apps requiring consistent API interaction. This provides automatic token injection and centralized error handling across all endpoints.