Validate Vue Router Query Strings with Zod

Ready for your weekly Vue & Nuxt dose?

‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏

Weekly Vue News #192

Validate Vue Router Query Strings with Zod

View online

Hi 👋

CodeSnap v3 is making great progress — I might be able to launch it sooner than expected! The new UI, built with Nuxt UI Pro, is looking amazing. Stay tuned!

Enjoy this issue and have a lovely week ☀️

Vue

📕 Handling large lists efficiently in Vue 3

👉🏻 In this article, you’ll explore the best techniques to optimize large lists in Vue 3.

📕 Vue 3 Really Doesn’t Need Pinia

👉🏻 The article argues that Vue 3's built-in features make external state libraries like Pinia unnecessary, especially when using the Composition API.

📹 Modern Vue.js Crash Course 2025

👉🏻 In this video CJ gives a crash course in building front-end applications with Vue.

👉🏻 He covers state management, components, scoped styles, form state, DOM events, emitting events from child components, listening for events in parent components, defining / passing props, rendering lists and more.

📹 Vue animations just got WAY better

👉🏻 Motion (previously Framer Motion) has been one of the things that made the author jealous of React devs.

👉🏻 But now, with an official Vue integration, it's quickly becoming his go-to way of making advanced animations in Vue.

🛠️ Volt UI Component Library for Vue.js

👉🏻 50+ UI Components

👉🏻 Powered by Unstyled PrimeVue

👉🏻 Tailwind CSS v4

👉🏻 Code Ownership

👉🏻 Full control over theming

👉🏻 Open Source

💡 Vue Tip: Validate Vue Router Query Strings with Zod

Zod is well known for validating API responses, but it can also be used to validate & parse Vue Router query strings:

1<script setup lang="ts">
2const route = useRoute()
3
4const routeValidation = z.object({
5  page: z.number({ coerce: true }).optional(),
6  search: z.string().optional(),
7})
8
9const validatedRoute = computed(() => routeValidation.parse(route.query))
10script>

Nuxt

📕 Build a Custom Quiz App With Nuxt and Xata

👉🏻 Learn how to use open source technologies to create an intuitive Q&A application to test your (or someone else’s) knowledge.

🎧 DejaVue: New Releases: Nuxt 3.16 and Nuxt UI 3

👉🏻 Nuxt 3.16 dropped and it's packed with goodies.

👉🏻 In this episode, Alex & Michael break down all the cool stuff in this release that'll make your Nuxt development better.

🛠️ Nuxt 3.16.2

👉🏻 Includes a couple of long awaited fixes, particularly with scroll behaviour + cookies.

👉🏻 Error handling should also be a bit nicer for errors that occur when starting Nuxt.

📅 Events

Vueconf.US (19 - 21 May 2025, Tampa, Florida)

MadVue (29 May 2025, Madrid, Spain)

PragVue (23 September 2025, Czech Republic)

VueFes (25 October 2025, Otemachi, Japan)

💬 Quote of the week

🧑🏻‍💻 In Other News

📕 The Frontend Treadmill

👉🏻 Frontend teams should avoid rewriting their frontend with new frameworks, as these frameworks become obsolete quickly.

👉🏻 Instead, teams should deeply understand their current framework and focus on web fundamentals, which offer more long-term value and career stability.

📕 Real-world uses of TypeScript’s utility types

👉🏻 Sam Rose walks us through some real-world usage of TypeScript’s utility types in their day job’s open source codebase to help those new to the language get to grips with this key capability.

🛠️ Type Buddy

👉🏻 A VS Code extension to help you understand TypeScript types.

🛠️ Gunshi

👉🏻 A modern JavaScript command line Library

👉🏻 Simple & universal

👉🏻 Type safe

👉🏻 Composable

👉🏻 Lazy & async

👉🏻 Internationalization