Sharing API types from a NestJs backend to a Vue frontend (or any other frontend) application: Best practices

In my development setup, I have a VueJs and Typescript Front End app along with a PHP server that is in the process of being converted to NestJs. Both of these projects reside in the same Monorepo, allowing me to share types for DTOs between them.

I am exploring the idea of creating a helper that can analyze the routes in Nest and automatically generate corresponding Interfaces in Typescript. This would enable me to have Typescript types for each route whenever I perform a post/get operation. Is this feasible, or am I just dreaming?

Thank you in advance for any insight!

typescriptvue.jstypescript-typingsnestdto

Answer №1

Discover this informative document from NestJS: https://docs.nestjs.com/openapi/introduction.

NestJS's Swagger package is capable of producing an OpenAPI specification, which serves as the industry standard for defining APIs. You can learn more about it at . Once you obtain an OpenAPI file, the possibilities are endless.

One of the exciting things you can do is generate Typescript types and create entire backend or frontend API modules using libraries like axios or fetch, all of which are strongly typed. Furthermore, you can generate frontend clients for various programming languages based on a shared API specification. OpenAPI generators can assist with this process (or you can develop your own ;)). Find out more at

In essence, the key steps to follow include:

  1. Generate an OpenAPI file from your NestJS routes (NestJS provides a package for this)
  2. Once you have an OpenAPI specification (in JSON format), utilize an OpenAPI generator to generate types and a complete frontend module for calling your API.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for monitoring changes to files while developing a NestJs application within a Docker container

Having an issue with NestJS and Docker here. Trying to run the development script using npm start: dev, but encountering a problem where the app runs fine but doesn't detect any changes in the source files, hindering the development process. Here&apo ...

typescriptdockerdocker-composenestjs

What is the process of converting the new syntax of SomeFunction() to TypeScript?

When I try to convert a basic JS file to TS while having implicit "any" disabled, I encounter the following error: Error TS7009: When attempting to create a new expression without a constructor signature, it implicitly defaults to an 'any' typ ...

typescript

Ways to retrieve data object within an HTMLElement without relying on jQuery

Within my web application, I have successfully linked a jQuery keyboard to a textbox. Now, I am seeking a way to explicitly call the keyboard.close() function on the keyboard as I am removing all eventListeners from the text field early on. To achieve thi ...

javascriptjquerytypescriptecmascript-5

Retrieve a specific attribute from a collection of JSON objects and transfer it to a separate object

Having a JSON object array with various project information: [ {"Project":"Project 1","Domain":"Domain1","Manager":"Manager1"}, {"Project":"Project 2","Domain":&q ...

angulartypescript

Switching Vue.js from the standalone build to the runtime-only build midway through a project?

Opted for the runtime-only version of Vue.js for a new project. I came across in the documentation that to switch to the standalone version, one must include an alias in webpack like this: resolve: { alias: { 'vue$': 'vue/dist/vue.js& ...

javascriptvue.jsvuejs2

Tips for including an authorization token in an HTTP request

I encountered a 401 unauthorized error when trying to access my REST endpoint, likely due to the security measures I have implemented. I suspect that there might be an issue with how I am handling the HTTP headers. The application utilizes a Spring Boot b ...

angulartypescriptrestspring-boot

Using `it` with accessing class members

When testing whether a specific object/class is correctly wired up, I often utilize it.each to prevent writing repetitive tests. The issue arises when the type of the object doesn't have an index signature, requiring me to cast it to any for it to fun ...

typescript

Setting default values on DTO in NestJS can be done by using the DefaultValue decorator provided

import { IsString, IsNumber, IsOptional, IsUUID, Min, Max } from 'class-validator'; import { Transform } from 'class-transformer'; export class QueryCollateralTypeDto { @Transform(({ value }) => parseInt(value)) @IsNumber() @I ...

node.jstypescriptvalidationnestjsdefault

Tips for utilizing the /foo-:bar pathway in Nuxt.js?

I am trying to utilize the router /foo-:bar in Nuxt. Do you have any suggestions on how I could make this work? I attempted using pages/foo-_bar.vue but it did not yield the desired results. ...

javascriptvue.jsnuxt.jsnuxtjs

The nz-switch function is malfunctioning as a result of an update that has affected its value

<form [formGroup]="businessFoodHygieneForm"> <div class="box p-4 d-flex jc-between ai-center"> <span> Food Hygiene Link </span> <label> <nz-switch class="switch- ...

angulartypescriptangular-reactive-formsng-zorro-antd

Issues with naming in Gulp, Angular2 Final, and Visual Studio: "Cannot find name" and "Duplicate identifier" errors

Recently, I updated my project to utilize the final release of Angular 2 and also upgraded Visual Studio to use TypeScript 2.0.3 from the Tool -> Extensions and Updates manager. I compile my TypeScript using Gulp, and it compiles without any errors. Ho ...

angulartypescriptvisual-studio-2015npmgulp

Encountering an issue while trying to execute the command "ionic cordova build android --prod --release

Currently, I am facing an issue while trying to build my apk for deployment on the Play Store. The error message is causing a time constraint and I urgently need to resolve it. Any help or suggestions regarding this matter would be greatly appreciated. ...

androidcordovatypescriptionic-frameworkproduction

Combining Vue2 with Typescript can sometimes result in a missing field in an object when assigning a Prop to

If I am using TypeScript version 4.1 and have a component structured like this. @Component export default class Test extends Vue { @Prop() private msg!: string; private testObj={ msg: this.msg, test: 123 } created(){ console.log(JSON. ...

typescriptvuejs2

What is the best way to run a scheduled task automatically using node-cron?

I have a custom function that saves data to the database using the POST method. When testing it with Postman, I send an empty POST request to trigger the controller. Upon execution, the function triggers two more functions. One of them is responsible for ...

javascripttypescript

I am encountering ESLint and Vetur warnings when using the <script setup> tag in templates, despite having them included in my code

When utilizing <script setup> in Vue 3, I am receiving warnings on my methods as they no longer require a return statement. Any insights into why these warnings are appearing? https://i.sstatic.net/Zg4M0.png https://i.sstatic.net/ee18q.png ...

vue.jsvuejs3

Developing React components with Typescript requires careful consideration when defining component props, especially when the component may be

Consider the following scenario: { this.props.userName && <UserProfile userName={this.props.userName} /> In the UserProfile component: interface UserProfileProps { userName: string; } class UserProfile extends React.Component<UserProfile ...

reactjstypescript

What is the best way to show HTML code from an HTML file in a Vue template?

I need help showcasing the HTML code from an external file in a Vue component template. <template> <div class="content"> <pre> <code> {{fetchCode('./code/code.html')}} & ...

javascripthtmlvue.jsfilereader

Utilize the Vue 3 Composition API and call the useRouter() function within the onMounted

I am looking to implement the functionality of useRoute within my component that is called in the onMounted hook. Here is an example: import { checkUserAuth } from '@/common/CheckUserAuth' onMounted(async () => { await checkUserAuth() }) T ...

vue.jsvuejs3vue-routervue-composition-api

When using Vue.js, scrolling inside the modal will seamlessly scroll the content of the modal's background as well

When you click on the image, a long scrolling modal appears. The issue is that when you scroll in the modal, it also scrolls the background of the modal. How can this be fixed? The Modal component is included in the code below: Carousel.vue <templa ...

vue.jsscrollmodal-dialogpopupmodalpopup

Tips for transferring slot/data to an inertia layout component

How can a slot or prop be passed to a layout component in inertia? For instance, consider the ForgotPassword component: <template> <slot name="title">Forgot Password</slot> Forgot password content here... </template ...

laravelvue.jsinertiajs