think-swagger-ui-vuele: A Custom Swagger UI Implementation for Think-Vuele

Swagger‑UI has many versions that are often cumbersome to use, leading developers to rely on tools like Postman and manually input each endpoint. To address this, the author created think‑swagger‑ui‑vuele , a custom Swagger UI built on the think‑vuele framework that parses Swagger‑format JSON and renders a dedicated UI.

Swagger consists of a backend that provides data and a frontend that displays it. It serves as a standard format for describing RESTful APIs, enabling automatic generation of JSON documentation through language‑specific annotations.

The project depends on think‑vuele . A live demo is available at http://sw.tennetcn.com and the source code can be found on GitHub: https://github.com/chfree/think-swagger-ui-vuele .

Usage

Download and compile the project:

git clone https://github.com/chfree/think-swagger-ui-vuele
npm install
npm run dev
npm run build

For Java projects, add the following Maven dependency:

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

The JAR is part of the think‑free‑base project.

Login

The login page supports both JSON mode and direct Swagger URL access; the only requirement is to obtain a standard Swagger JSON file.

The UI offers two themes: a backend‑admin style and a centered layout with side margins.

Performance Optimizations

When an API has more than 1000 endpoints, the original Swagger UI becomes slow because it parses and renders all data at once. This implementation first loads only API summary information and fetches detailed request/response data on demand, achieving near‑instant loading.

It also auto‑populates non‑JSON request bodies using mock.Random , provides an online JSON editor (based on jsoneditor ), and displays response data with a Vue JSON viewer ( vue-json-viewer ).

Settings

Custom request headers can be defined globally; every request will automatically include the configured headers, simplifying token‑based authentication.

Swagger Information Display

The UI renders information sourced from the backend Swagger configuration, presenting it in a clear, organized manner.

Overall, this project provides a lightweight, fast, and feature‑rich Swagger UI tailored for the Think‑Vuele ecosystem.