skills.rest
jason23452
jason23452COMMUNITY
Explore all skills by this author →
GitHub

axios-token-baseurl-error

Generates framework-aware HTTP transport clients with token headers and normalized errors for Vite and Nuxt projects.

Updated Jun 28, 2026
Search Tags:#error handling#fetch#vite#api client#nuxt#axios#token authentication
One-click install
npx skills add https://github.com/jason23452/my-skill --skill axios-token-baseurl-error-jason23452
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: axios-token-baseurl-error
Source: https://github.com/jason23452/my-skill/tree/main/frontend/axios-token-baseurl-error
Command: npx skills add https://github.com/jason23452/my-skill --skill axios-token-baseurl-error-jason23452

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires axios, and includes scripts (resource) components.

What problem does it solve? Frontend projects repeatedly rebuild the same HTTP plumbing: configuring base URLs, attaching Authorization Bearer tokens, and converting Axios or $fetch errors into a predictable app error shape. This Skill scaffolds that shared API transport layer once, correctly placed for the project's architecture, so feature code only writes thin business wrappers. ## Core Features & Use Cases - Framework-aware client generation: Uses Axios for Vite-based React and Vue SPAs, and Nuxt's built-in $fetch for Nuxt projects, detected automatically. - Complete transport layer: Generates client, token provider, error normalization, dynamic HTTP methods (api.get/post/put/patch/delete), exported helper functions (getApi, postApi), types, and index exports. - Architecture-aware placement: Detects shared/features layouts, Nuxt app/ directories, and plain SPA conventions to place files in the right folder, and preserves existing custom transport clients. - Use Case: In a React + Vite project, run the bootstrap to get src/shared/api with a token-aware Axios client, then call getApi<User[]>('/users', { page: 1 }) from a feature hook without touching transport code. ## Quick Start Ask the AI to set up the API client with base URL, Bearer token handling, and normalized errors for your Vite or Nuxt frontend project.

Frequently Asked Questions about axios-token-baseurl-error

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

FAQPage Schema
How do I set up an Axios client with a Bearer token in a Vite React app?▼

Create an Axios instance with a baseURL from VITE_API_BASE_URL and add a request interceptor that reads a token via a replaceable provider and sets the Authorization Bearer header. This Skill generates that client plus methods, helpers, and error normalization automatically.

Axios vs $fetch for Nuxt API calls, which should I use?▼

For Nuxt projects, use the built-in $fetch wrapped with runtime config baseURL resolution and token headers, avoiding an extra dependency. For Vite-based React and Vue SPAs, use Axios with interceptors. The Skill detects the framework and picks the right transport.

How do I normalize Axios errors into a custom error class?▼

Check axios.isAxiosError, then map response status, payload message, and code into an ApiError class with status, code, and details fields. For $fetch, read response._data or data and map statusCode and message the same way.

Where should the API client live in a feature-based project structure?▼

In shared/features architectures, place the transport in src/shared/api or shared/api, never under app/. Business endpoint wrappers belong in the owning feature module such as src/features/users/api. The bootstrap script detects the layout and chooses the correct folder.

Does this work with Nuxt useAsyncData and SSR?▼

Yes. The default token provider returns an empty string when window is undefined, making it SSR-safe. Pages call business wrappers inside useAsyncData with a stable key, and can pass Nuxt's abort signal through the config argument.

Will the bootstrap overwrite my existing custom API client?▼

No. The script detects existing custom transport files containing axios.create, $fetch, or apiClient patterns and keeps them untouched. It only updates files it previously generated, identified by a generated-file header marker.

Related Skills

Explore More Software Engineering Skills→
Impertio-StudioImpertio-Studio
3

vite-agents-project-scaffolder

Scaffold Vite projects with config, env, and directory templates.

Official
Advanced
discountedcookiediscountedcookie

vue-composables

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

Community
Advanced
borealBytesborealBytes
7

control-ui-e2e

Automate browser-based UI end-to-end tests for the OpenClaw Control UI with Vitest and Playwright.

Community
Intermediate
imehrimehr

api-validation

Enforce API contracts with Zod and OpenAPI schemas for REST and RPC endpoints.

Community
Intermediate