API Request Builder

A Vue 3 component for building and testing API requests with a beautiful UI.

Start of Selection

中文文档

Workflow

graph TD
    A[Start] --> B[Configure Request]
    B --> C[RequestForm Component]
    C --> D[Set Request Parameters]
    D --> E[URL/Path]
    D --> F[Authentication]
    D --> G[Headers]
    D --> H[Request Body]
    E & F & G & H --> I[Execute Request]
    I --> J[ResponseSection Component]
    J --> K[Display Response]
    K --> L[Status Code]
    K --> M[Response Headers]
    K --> N[Response Body]
    L & M & N --> O[Data Transformation]
    O --> P[DataTransform Component]
    P --> Q[Transform Function]
    Q --> R[Transformed Result]
    R --> S[End]

Installation

npm install vue-api-request-builder
# or
yarn add vue-api-request-builder
# or
pnpm add vue-api-request-builder

Usage

Basic Usage

<template>
  <div class="app-container">
    <RequestForm v-model="requestSchema" @update:modelValue="handleSchemaChange" />
    <ResponseSection v-model="requestSchema" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { RequestForm, ResponseSection, type RequestSchema, defaultRequestSchema } from 'vue-api-request-builder';

const requestSchema = ref<RequestSchema>(defaultRequestSchema);

const handleSchemaChange = (newSchema: RequestSchema) => {
  console.log("Schema changed:", newSchema);
};
</script>

Components

RequestForm

The main component for building API requests. It provides a form interface for configuring:

Props

• modelValue (RequestSchema): The request schema object (v-model)

Events

• update:modelValue: Emitted when the schema changes

Features

• HTTP method selection (GET, POST, PUT, DELETE, OPTIONS)
• URL configuration with base URL and path
• URL parameters management
• Authentication options:
  • None
  • Basic Auth
  • Bearer Token
• Custom headers
• Request body support for:
  • JSON
  • Form Data
  • Raw text
• Live preview of request URL and body

ResponseSection

Displays the response from the API request.

Props

• modelValue (RequestSchema): The request schema object (v-model)

Features

• Request method selection (XMLHttpRequest/Fetch)
• Response display:
  • Status code with color coding
  • Response time
  • Response headers
  • Response body with formatting
• Error handling and display

DataTransform

Component for configuring and executing data transformation functions.

Props

• modelValue (string): The transformation function string (v-model)

Features

• Code editor interface
• JavaScript function support
• Real-time syntax checking
• Function execution preview

KeyValueInput

A reusable component for managing key-value pairs.

Props

• modelValue (KeyValuePair[]): Array of key-value pairs (v-model)
• addButtonText (string): Text for the add button
• showPreview (boolean): Whether to show the preview
• previewText (string): Text to show in preview

Events

• update:modelValue: Emitted when the key-value pairs change

Types

RequestSchema

interface RequestSchema {
  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'OPTIONS';
  url: string;
  path: string;
  auth: AuthConfig;
  params: KeyValuePair[];
  headers: KeyValuePair[];
  body: RequestBody;
}

AuthConfig

interface AuthConfig {
  type: 'none' | 'Basic' | 'Bearer';
  username?: string;
  password?: string;
  token?: string;
}

RequestBody

interface RequestBody {
  type: 'application/json' | 'multipart/form-data' | 'text/plain';
  json?: string;
  formData?: KeyValuePair[];
  raw?: string;
}

ResponseData

interface ResponseData {
  status: string;
  headers: Record<string, string>;
  body: string;
  timing?: number;
}

Utilities

executeRequest

function executeRequest(
  schema: RequestSchema,
  method: 'fetch' | 'xhr' = 'xhr'
): Promise<ResponseData>

Executes the API request using either Fetch API or XMLHttpRequest.

executeTransformFunction

function executeTransformFunction(
  transformFunctionString: string,
  data: any
): any

Executes a data transformation function to convert input data into the desired format.

Dependencies

This package requires:

• Vue 3.x
• Ant Design Vue 4.x

License

MIT