☰  [ ![Vue
School](https://vueschool.io/img/logo/vueschool_logo_multicolor_negative.svg)
](/ "Go to VueSchool.io, home of Vue.js courses")

×

Courses

  * [ Video Courses ](/courses)
  * [ Vue.js Master Class 2024 Edition ](/the-vuejs-master-class-2024)
  * [ Vue.js Master Class ](/the-vuejs-master-class)
  * [ Workshops ](/workshops)
  * [ Mastering Nuxt ](https://masteringnuxt.com/?ref=vueschool)

[ Plans ](/plans)

Business Services

  * [ Vue.js Corporate Training ](/vue-corporate-training)
  * [ Workshops ](/workshops)
  * [ Hiring ](/hiring)

[ Learning Paths ](/learning-paths) [ Articles ](/articles)

Events

  * [ Frontend Nation ](https://frontendnation.com/)
  * [ Vue.js Nation ](https://vuejsnation.com/)
  * [ Nuxt Nation ](https://nuxtnation.com/)
  * [ Vue.js Forge ](https://vuejsforge.com/)

[ Get Certified
](https://certificates.dev/vuejs/?utm_source=vueschool_TLN&utm_medium=link&utm_campaign=vueschool.io_TLN_Link)
[ 40% OFFER  ](/sales/spring24)

* * *

[ Login ](/login) [ Create account ](/register)

×

[ ![Banner](/images/banners/static/NUXT_CERT_EB_LAUNCH/floating.png)
![Banner](/images/banners/static/NUXT_CERT_EB_LAUNCH/floating-mobile.png)
](https://certificates.dev/nuxt)

[ Home ](/) / [ Blog ](/articles) /  Zod and Query String Variables in Nuxt

Share:

[
](https://twitter.com/intent/tweet?text=Zod%20and%20Query%20String%20Variables%20in%20Nuxt%20-%20Vue%20School%20Articles&url=https://vueschool.io/articles/vuejs-
tutorials/zod-and-query-string-variables-in-nuxt/) [
](https://www.facebook.com/sharer/sharer.php?u=https://vueschool.io/articles/vuejs-
tutorials/zod-and-query-string-variables-in-nuxt/)

[ ![Zod and Query String Variables in Nuxt](https://blog.vueschool.io/wp-
content/uploads/2024/02/zod-and-query-string-variables-in-nuxt.jpg)
](/articles/vuejs-tutorials/zod-and-query-string-variables-in-nuxt/)

#  Zod and Query String Variables in Nuxt

[ ![Daniel Kelly](https://blog.vueschool.io/wp-content/uploads/2022/09/vue-bg-
headshot-sqaure-96x96.jpg) Daniel Kelly  February 5th 2024
](/articles/author/daniel-kelly)

We all know how important it is to validate the payloads of POST requests to
our API endpoints and [ Zod ](https://zod.dev/) makes this super easy to do!
BUT did you know Zod is also super useful for working with data from the
user’s query string variables?

Let me show you how to do this with your Nuxt apps!

##  How To Use Zod with Query Variables

Using zod to validate and get valid data from a query string in Nuxt is
straightforward. Here is an example:

    
    
    <script setup lang="ts">
    import { z } from 'zod';
    const route = useRoute();
    
    // Define the expected shape of the query string data
    const schema = z.object({
      q: z.string().optional(),
      page: z.coerce.number().optional().default(1),
    });
    
    // create a computed property with the zod parse method
    // and the route.query object from Router
    const validData = computed(() => {
      try {
        return schema.parse(route.query);
      } catch (e) {
        alert('invalid query string!');
        return null;
      }
    });
    
    // 🎉 Now validData is guaranteed to be what you expect!
    </script>

So, what are the benefits here?

##  Get Predictable Valid Data

First, I can rest assured the query string variables look like I’d expect them
to. Check out these examples:

  * ` ?q=hello&q=world ` \- errors because q is an array instead of a string 
  * ` ?page=hello ` \- errors because page is not a number 
  * ` ?q=hello ` \- The resulting data is ` { q: 'hello', page: 1 } ` because q is a valid string and page is a default of 1 
  * ` ?page=1 ` \- The resulting data is ` { page: 1 } ` because page is a valid number (q isn’t provided but that’s ok, it’s marked optional) 
  * ` ?page=2&q=hello ` \- ` { q: "hello", page: 2 } ` \- I think you get the picture 🙂 

##  Ignore Useless Data

You know what query variables you expect, don’t clutter your ` validData `
with random query va