Generate types and functions using OpenAPI

Hello everyone!

I'm working on a project based on Vue and C# (.NET). This project is using openApi that create npm package that contain types and javascript api functions. It's look like this:

For Types:

/**
 * The version of the OpenAPI document: 1.0

 *
 * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
 * https://openapi-generator.tech
 * Do not edit the class manually.
 */
import { CertificationResponse } from './certification-response';
import { TopicResponse } from './topic-response';
/**
 *
 * @export
 * @interface EventResponse
 */
export interface EventResponse {
    /**
     *
     * @type {number}
     * @memberof EventResponse
     */
    id: number;
    /**
     *
     * @type {string}
     * @memberof EventResponse
     */
    title?: string | null;

}

For JS it's using two files

/**
 * The version of the OpenAPI document: 1.0

 *
 * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
 * https://openapi-generator.tech
 * Do not edit the class manually.
 */
import { AxiosPromise, AxiosInstance } from 'axios';
import { Configuration } from '../configuration';
import { EventAddOrUpdateRequest } from '../models';
import { EventResponse } from '../models';
import { EventResponseWithSessionDatesEventPaginatedResponse } from '../models';
import { UpdateEventsAuthorRequest } from '../models';
/**
 * EventApi - factory interface
 * @export
 */
export declare const EventApiFactory: (configuration?: Configuration, basePath?: string | (() => Promise<string>), axios?: AxiosInstance) => {
    /**
     *
     * @param {number} eventId
     * @param {UpdateEventsAuthorRequest} [updateEventsAuthorRequest]
     * @param {*} [options] Override http request option.
     * @throws {RequiredError}
     */
    updateEventAuthor(eventId: number, updateEventsAuthorRequest?: UpdateEventsAuthorRequest, options?: any): AxiosPromise<void>;
};

Second file is simply compiled javascript file with axios request

I would like to implement something like this on my personal project based on Laravel (Only backend) and Vue + vite (For frontend). It's it possible or Laravel can't delivery something similar?

LaryAI

2 years ago

Best Answer

Level 58

Hello!

Yes, it is definitely possible to implement a similar setup in a project based on Laravel for the backend and Vue + Vite for the frontend. Laravel can generate OpenAPI (formerly known as Swagger) documentation using packages like laravel-swagger or L5-swagger. Once you have the OpenAPI documentation, you can use the OpenAPI Generator to create client-side code for your Vue application.

Here's a step-by-step guide on how you can achieve this:

Generate OpenAPI Documentation for Your Laravel API:

First, you need to create OpenAPI documentation for your Laravel API. You can use a package like L5-swagger which automatically generates OpenAPI documentation from your Laravel routes and DocBlocks.

Install the package via Composer:
```
composer require "darkaonline/l5-swagger"
```
Publish the configuration file:
```
php artisan vendor:publish --provider "L5Swagger\L5SwaggerServiceProvider"
```
Add annotations to your controllers and models following the OpenAPI specification. Then, generate the documentation:
```
php artisan l5-swagger:generate
```
Install OpenAPI Generator CLI:

You can install the OpenAPI Generator CLI globally using npm:
```
npm install @openapitools/openapi-generator-cli -g
```
Generate Client Code:

Use the OpenAPI Generator CLI to generate client code for your Vue application. You can specify the generator you want to use (e.g., typescript-axios for TypeScript with Axios).
```
openapi-generator-cli generate -i http://your-laravel-app-url/docs/api-docs.json -g typescript-axios -o /path/to/your/vue-app/src/api
```
Replace http://your-laravel-app-url/docs/api-docs.json with the URL to your generated OpenAPI documentation and /path/to/your/vue-app/src/api with the path where you want to generate the code.

Integrate Generated Code into Vue:

After generating the code, you can import the types and functions into your Vue components and use them to interact with your Laravel API.

import { EventApiFactory } from '@/api'; // Adjust the path as necessary

// Use the API functions in your Vue components
const eventApi = EventApiFactory();
eventApi.getEvents().then(response => {
  console.log(response.data);
});

Develop Your Frontend with Vite:

Continue developing your Vue application with Vite as you normally would. The generated API client will handle the communication with your Laravel backend.

Remember to regenerate the client code whenever you update your API and its documentation to keep the client in sync with the server.

This approach allows you to maintain a single source of truth for your API specification and automates the generation of types and functions for the client-side, ensuring consistency and saving time.

Please or to participate in this conversation.