Weekly Vue News #138 - Validate Props in Script Setup With TypeScript

Weekly Vue News #138 Validate Props in Script Setup With TypeScript View online Hi 👋 While there's not much excitement to report from my end this time around, I do have something special for you! I've snagged a ticket to the Vue.js Live 2024 Online conference, and I'm thrilled to raffle it off to one lucky subscriber. Check out the link below for your chance to join in on the action! Have a nice week ☀️ Sponsored Win a free ticket for Vue.js Live 2024 ✨ I teamed up with the Vue.js Live team to raffle one ticket for the conference. 🗓️ April 25 & 26 | Online 🎙️ 15+ speakers 🧑‍💻 5K+ attendees 👉 Participate here Vue 📕 App structure for big Vue projects 👉🏻 The author describe what he thinks has been the more intuitive easy to work and maintain folder structure in medium to large Vue applications. 📕 How to create private state in stores 👉🏻 Discover the secrets to creating private state in Pinia stores. 👉🏻This article explores the differences between Options & Setup Stores and how to maintain data integrity. 📕 Vue Tip: Validate Emitted Events 👉🏻 In this article, you'll learn how to implement validation in emitted events within the Vue.js framework. 📕 State management in Vue 3: Why you should try out Pinia 👉🏻 Delve into state management strategies in Vue and get an introduction to Pinia, the intuitive store. 📹 Vapor: The Future Of Vue 👉🏻 A pretty good overview from Theo about Signals and Vapor mode in Vue. 👉🏻 Check out the comment section for some minor corrections from Evan You. 📹 Vue.js and Firebase crash course 👉🏻 In this crash course David East will take you through all of the basics and build an Vue app using Authentication, Firestore, and Vue Router with VueFire. Nuxt 📕 Build a Nuxt app with Azure serverless REST API 👉🏻 In this article, we will learn how to build an static web app using Nuxt, with serverless APIs using Azure Functions CLI and Static Web Apps Emulator. 📕 Frequently asked questions about ESLint integration in Nuxt 👉🏻 The Nuxt team created a list to help you choose the ESLint integrations for your Nuxt app. 📹 Type-safe routing in Nuxt 👉🏻 Have you ever wondered if Nuxt could be more type-safe? 👉🏻 With the experimental typed pages support, it can! 📹 Integrating WebSockets in Nuxt and Nitro 👉🏻 Alexander show you how to set up WebSockets in Nitro and in Nuxt. 📅 Events Vue.js Live Conference 👉🏻 25 - 26 April 2024, Online Vueconf US 2024 👉🏻 22 - 24 May 2024, New Orleans, US vuejs.de Conf 👉🏻 8 - 9 October 2024, Bonn, Germany 💬 Quote of the week 🔥 Vue Tip: Validate Props in Script Setup With TypeScript You can define prop validations for your component in the script setupscript setup using the defineProps()defineProps() compiler macro. This is a great way to ensure that the props you receive are of the correct type and shape. Let's first take a look at the official example from the Vue docs without using TypeScript: 1<script setup> 2defineProps({ 3 // Basic type check 4 // (null and undefined values will allow any type) 5 a: Number, 6 // Multiple possible types 7 b: [String, Number], 8 // Required string 9 v: { 10 type: String, 11 required: true, 12 }, 13 // Number with a default value 14 d: { 15 type: Number, 16 default: 100, 17 }, 18 // Object with a default value 19 e: { 20 type: Object, 21 // Object or array defaults must be returned from 22 // a factory function. The function receives the raw 23 // props received by the component as the argument. 24 default(rawProps) { 25 return { message: 'hello' }; 26 }, 27 }, 28 // Custom validator function 29 // full props passed as 2nd argument in 3.4+ 30 f: { 31 validator(value, props) { 32 // The value must match one of these strings 33 return ['success', 'warning', 'danger'].includes(value); 34 }, 35 }, 36 // Function with a default value 37 g: { 38 type: Function, 39 // Unlike object or array default, this is not a factory 40 // function - this is a function to serve as a default value 41 default() { 42 return ['one, two']; 43 }, 44 }, 45}); 46</script> Now let's rewrite the same example using TypeScript inside script setupscript setup: 1<script setup lang="ts"> 2interface Props { 3 a?: number; 4 b?: string | number; 5 c: string; 6 d?: number; 7 e?: { message: 'string' }; 8 f?: 'success' | 'warning' | 'danger'; 9 g?: Array<string>; 10} 11withDefaults(defineProps<Props>(), { d: 100, e: { message: 'hello' }, g: () => ['one', 'two'] }); 12</script> All we need to do is define an interface for the props and use the withDefaultswithDefaults helper to set default values. TypeScript will take care of the rest. Try it yourself on StackBlitz: ✨ Open Demo 😂 Fun 🧑🏻‍💻 In Other News 📕 Eloquent JavaScript 👉🏻 An online book for learning JavaScript. 📕 What is INP and why you should care 👉🏻 Google introduced Interaction to Next Paint (INP) as a new Core Web Vital on March 12 to emphasize the importance of a website's overall responsiveness throughout a user's entire visit. 📕 Playing with Infinity in CSS 👉🏻 This blog explores the concept of using `infinity` within CSS, specifically in the `calc()` function. 👉🏻 It can be used to achieve unique effects like ensuring an element has the highest `z-index`. 🛠️ 404s 👉🏻 A gallery of unique, creative 404 pages. Comments? Join the discussion about this issue here. Until next week, Michael Hoffmann (Curator) Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany