Custom Swagger UI for Think‑Vuele: Implementation, Usage, and Performance Optimizations

The author created a custom Swagger UI based on think‑vuele to avoid the complexity of multiple Swagger UI versions and the manual entry required by Postman, enabling automatic parsing of Swagger JSON definitions.

Swagger serves as a standard data format for describing RESTful APIs; the backend provides the JSON schema while the frontend renders the documentation.

This project depends on the think‑vuele module and is available at demo and GitHub .

Usage

Manual download and build

// Download the code
git clone https://github.com/chfree/think-swagger-ui-vuele

// Install dependencies
npm install

// Run directly
npm run dev

// Build
npm run build

Java Maven dependency

<dependency>
  <groupId>com.tennetcn.free</groupId>
  <artifactId>think-swagger-ui-starter</artifactId>
  <version>0.0.4</version>
</dependency>

The JAR is a sub‑module of the open‑source think‑free‑base project.

Login

The login page supports both JSON mode and direct Swagger URL access; it simply requires the standard Swagger JSON data.

Two themes are available: a backend‑admin style and a centered layout with side margins.

Home page

When the number of interfaces exceeds 1000, the original Swagger UI becomes slow because it renders all endpoints at once; the custom UI improves this by first loading only API summary information and rendering details on demand, achieving near‑instant loading.

It also auto‑fills non‑JSON request bodies using mock.Random , provides JSON formatting and editing via jsoneditor (by josdejong), and displays response data with a hierarchical JSON viewer ( vue‑json‑viewer by chenfengjw163).

Settings

Custom request headers can be defined globally so that every API call automatically includes the configured tokens for authentication.

Swagger Information Display

The UI presents backend‑provided Swagger configuration details, including endpoint URLs and metadata.

Overall, this customized Swagger UI offers a lightweight, fast, and feature‑rich alternative for documenting and testing APIs within the think‑vuele ecosystem.