This project was built for the following blog article demonstrates how to integrate SwaggerUI into a Vue 3 application and create custom React-based plugins to extend SwaggerUI's functionality. It showcases a Star Wars-themed API browser with custom UI components.

• Vue 3 + TypeScript + Vite setup
• SwaggerUI integration within a Vue application
• Custom React plugins for SwaggerUI without React as a dependency
• Star Wars API data display with custom components
• Tailwind CSS for styling

SwaggerUI provides a powerful system for extending its functionality through plugins. While SwaggerUI itself is built with React, you can create custom plugins for it using React even in a Vue application. This is possible because SwaggerUI provides its own React instance through its system context.

This project serves as a practical example for a blog article showcasing this integration pattern.

# Install dependencies
npm install

# Start the development server
npm run dev

# Build for production
npm run build

# Preview the production build
npm run preview

• src/plugins/: Contains SwaggerUI plugins and React components
• src/types.ts: TypeScript interfaces used throughout the project
• src/api-specification.ts: SwaggerUI API specification
• App.vue: Main Vue component that integrates SwaggerUI

• Blog article
• SwaggerUI Documentation
• SwaggerUI Plugin System