Intégrez SwaggerUI dans Vue 3 — et étendez-le comme un développeur Dev

Intégrer Swagger UI dans une application Vue 3 implique d'installer le package et de l'initialiser dans l'application Vue. Le package SwaggerUI est initialisé dans le hook de cycle de vie `onMounted` pour garantir que le DOM est entièrement rendu avant de monter SwaggerUI dans l'interface utilisateur. L'instance SwaggerUI peut être configurée avec un fichier de spécification Open API ou une URL de serveur. La création d'un plugin personnalisé implique d'encapsuler des composants d'interface utilisateur existants ou d'en créer de nouveaux pour personnaliser SwaggerUI. SwaggerUI est construit sur React, donc les plugins doivent également être construits avec React. La structure du plugin implique de créer une fonction qui renvoie un objet contenant des composants à encapsuler. Pour synchroniser l'état entre l'application Vue et un plugin, un nouvel état est défini et une action est déclenchée pour définir les caractères. L'état est ensuite sélectionné dans le magasin et utilisé pour rendre un composant `CharacterCard`. Pour typer les plugins, le fichier `tsconfig.json` doit être configuré pour autoriser les importations par défaut synthétiques et `esModuleInterop`. Enfin, typer l'instance SwaggerUI et le paramètre système implique de créer des interfaces pour l'instance SwaggerUI et le paramètre système.