har-to-vue

Convert HAR network captures into Vue components, APIs, and pages.

18|3|Updated Jan 8, 2026
One-click install
npx skills add https://github.com/Dwsy/agent --skill har-to-vue
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: har-to-vue
Source: https://github.com/Dwsy/agent/tree/main/skills/har-to-vue
Command: npx skills add https://github.com/Dwsy/agent --skill har-to-vue

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

HAR-to-Vue converts HAR captures into reusable Vue code, accelerating prototyping by turning real network activity into ready-to-use UI components, API clients, and pages.

Core Features & Use Cases

  • Generate component, API, and page outputs from HAR data to scaffold front-end code quickly.
  • Group endpoints by path or domain for organized codebases and typed interfaces derived from sample responses.
  • Support for multiple HTTP clients (fetch, axios, ky) and optional TypeScript for strong typing across outputs.

Quick Start

Install dependencies and run bun scripts/har_to_vue.ts on a HAR file to generate Vue artifacts.

Frequently Asked Questions about har-to-vue

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

FAQPage Schema
How do I generate Vue components from a HAR file?

Generate Vue components from a HAR file by running the script on your captured network traffic to translate real-world requests into ready-to-use UI scaffolding. It processes HAR data to produce modular outputs.

Can I generate TypeScript interfaces from HAR network traffic?

Yes, you can generate TypeScript interfaces from HAR network traffic. The tool derives typed interfaces directly from sample responses to ensure strong typing across generated API clients and pages.

Does HAR to Vue code generation support axios and fetch?

HAR to Vue code generation supports axios and fetch, alongside ky. You can configure your preferred HTTP client for flexible integration when scaffolding API clients from captured network activity.

What is the best way to group API endpoints when scaffolding from HAR data?

The best way to group API endpoints from HAR data is by path or domain. This configurable grouping organizes your codebase logically when generating components, pages, and API clients.

Do I need to manually filter HAR captures before generating Vue pages?

You do not need to manually filter HAR captures before generating Vue pages. The tool provides configurable filtering for HAR data to ensure only relevant network traffic is translated into code.