SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillshar-to-vue

har-to-vue

Frontend & websites

View repository

Updated 10-15 21:36

About this skill

HAR to Vue Converter

Convert HAR files into Vue source code, supporting batch processing of network requests and generating reusable Vue components and API services.

Quick Start

Basic Conversion

# 转换单个 HAR 文件为 Vue 组件
bun scripts/har_to_vue.ts input.har -o output.vue

# 批量转换所有请求为 API 服务
bun scripts/har_to_vue.ts input.har --mode api -o services/

Common Scenarios

Replicate website components:

bun scripts/har_to_vue.ts capture.har --mode component --template composition -o components/

Generate API services:

bun scripts/har_to_vue.ts capture.har --mode api --library axios -o api/

Full page generation:

bun scripts/har_to_vue.ts capture.har --mode page -o pages/home/

Conversion Modes

Component Mode

Convert HAR requests into Vue components, including data binding and template structure.

Generated content:

  • Reactive state for response data (ref/reactive)
  • Data fetching logic (onMounted/computed)
  • Template based on JSON structure

Options:

  • --template <composition|options>: Use Composition API or Options API
  • --typescript: Generate TypeScript type definitions
  • --with-props: Generate props definitions from request parameters

API Mode

Convert HAR requests into API service functions.

Generated content:

  • Function corresponding to each request
  • TypeScript type definitions
  • Request/response interfaces
  • Error handling

Options:

  • --library <fetch|axios|ky>: HTTP client library
  • --base-url: Inject base URL
  • --group-by <path|domain>: Grouping strategy

Page Mode

Generate a complete Vue page, including layout, routing, and state management.

Generated content:

  • Page component
  • Route configuration
  • API service file
  • Type definitions
  • Store (Pinia/Vuex) integration

Options:

  • --with-router: Generate route configuration
  • --with-store: Generate state management
  • --layout <default|admin|blank>: Layout template

HAR Parsing Rules

Request Mapping

HAR Field Vue Mapping
request.method HTTP method (GET/POST/PUT/DELETE)
request.url API endpoint path
request.headers Request header configuration
request.postData Request body (JSON/FormData)
response.content Response data structure

Type Inference

  • Automatically infer TypeScript interfaces from JSON responses
  • Extract array items as independent types
  • Generate enum values as union types
  • Mark optional fields as ?

Naming Conventions

  • URL path → function name (/api/users → getUsers）
  • Camel case conversion (user_profile → UserProfile）
  • Remove duplicate prefixes (getUserList → getList）

Output Structure

Component Mode Output

UserList.vue
├── <script setup>
│   ├── imports（ref, onMounted, 等）
│   ├── types（接口定义）
│   ├── state（响应式数据）
│   ├── methods（数据获取）
│   └── lifecycle（onMounted）
├── <template>
│   └── 基于 JSON 结构的绑定
└── <style>
    └── 基础样式

API Mode Output

api/
├── index.ts          # 导出所有 API
├── types.ts          # 类型定义
├── users.ts          # 用户相关 API
├── products.ts       # 产品相关 API
└── utils.ts          # 请求工具（拦截器、错误处理）

Page Mode Output

pages/
└── dashboard/
    ├── index.vue     # 页面组件
    ├── api.ts        # API 服务
    ├── types.ts      # 类型定义
    ├── router.ts     # 路由配置
    └── store.ts      # 状态管理

Advanced Features

Request Grouping

Automatically group APIs by URL pattern:

# 按路径分组
bun scripts/har_to_vue.ts input.har --group-by path

# 按域名分组
bun scripts/har_to_vue.ts input.har --group-by domain

# 自定义分组规则
bun scripts/har_to_vue.ts input.har --group-config custom-rules.json

Filter Requests

# 仅包含特定域名
bun scripts/har_to_vue.ts input.har --filter-domain api.example.com

# 排除静态资源
bun scripts/har_to_vue.ts input.har --exclude-extensions css,js,png,jpg

# 仅包含特定方法
bun scripts/har_to_vue.ts input.har --methods GET,POST

Template Customization

Use custom template files:

bun scripts/har_to_vue.ts input.har --template-file templates/custom.vue

Template variables:

  • {{ requests }}: Request list
  • {{ types }}: Type definitions
  • {{ imports }}: Import statements
  • {{ componentName }}: Component name

Configuration File

Supports configuration files har-to-vue.config.json：

{
  "mode": "component",
  "template": "composition",
  "typescript": true,
  "library": "axios",
  "output": "./src",
  "filter": {
    "includeDomains": ["api.example.com"],
    "excludeExtensions": ["css", "js", "png"]
  },
  "naming": {
    "style": "camelCase",
    "removePrefixes": ["get", "fetch"]
  }
}

Best Practices

1. Clean up HAR files

Clean up unnecessary requests before conversion:

  • Filter out static resources (images, CSS, JS)
  • Remove developer tool requests (hot reload, sourcemaps)
  • Keep business-related APIs

2. Type optimization

Manually optimize the generated types:

  • Merge duplicate type definitions
  • Extract common interfaces
  • Add appropriate comments

3. Error handling

Add unified error handling:

// utils.ts
export async function fetchWithErrorHandler(url: string) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(response.statusText);
    return await response.json();
  } catch (error) {
    console.error('API Error:', error);
    throw error;
  }
}

4. Environment variables

Use environment variables to manage API configuration:

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://api.example.com';

References