Nuxt Tip: Validate Data in Your Server Routes

When you are working with Nuxt server routes, you should always validate the data that you receive from the client before processing it.

This is important to ensure that your application is secure and that you are not vulnerable to attacks such as SQL injection or cross-site scripting. Additionally, validating your data can help you catch errors early on and prevent them from causing issues later on in your application.

Available Utilities for Validation

Luckily, h3 provides a simple and powerful way to validate data in your Nuxt server routes.

Info

h3 is the H(TTP) server framework which is used by Nitro, which is the server engine used in Nuxt 3+.

It provides the following utility methods to help you validate your data:

getValidatedQuery to validate query parameters
getValidatedRouterParams to validate route parameters
readValidatedBody to validate the request body

h3 allows you to use the validation library of your choice like Zod, Yup, or Joi to validate your data.

For this article, we will use Zod to validate the data in our Nuxt server routes with the following schema:

schema.ts

import { z } from 'zod'; const productSchema = z.object({ name: z.string().min(3).max(20), id: z.number({ coerce: true }).positive().int(), });

Validate Query Parameters

To validate query parameters in your Nuxt server routes, you can use the getValidatedQuery method provided by h3 instead of getQuery. This method takes the schema that you want to validate the query parameters against and returns the validated query parameters:

server/api/query.get.ts

export default defineEventHandler(async (event) => { const query = await getValidatedQuery(event, productSchema.parse); return { query, }; });

If you send a valid query like /?name=Product&id=1, you will get the following response:

json

{ "query": { "name": "Product", "id": 1 } }

If you send an invalid request that does not match the schema, h3 will throw a 400 Validation Error.

Info

If you want to get a partial query object instead of throwing an error if the query is invalid, you could use safeParse instead of parse.

Validate Route Parameters

To validate route parameters in your Nuxt server routes, you can use the getValidatedRouterParams method instead of getRouterParams:

server/api/[id

export default defineEventHandler(async (event) => { const params = await getValidatedRouterParams(event, productSchema.parse); return { params, }; });

Validate Request Body

You can use readValidatedBody to validate the request body and get the result, as a replacement of readBody:

server/api/body.post.ts

export default defineEventHandler(async (event) => { const body = await readValidatedBody(event, productSchema.parse); return { body }; });

Stackblitz

You can test all the above examples in the following Stackblitz:

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

Vue Tip: Simple Routing Without Using External Libraries

If you want to keep things simple and avoid adding extra dependencies, you can implement basic routing functionality in Vue.js without using external libraries like Vue Router.

Nuxt Tip: Fetch Data on the Server Before App Start

Learn how to pre-fetch data on the server before app start in Nuxt 3+ to improve load times and user experience.