#title Weekly Vue News #88 - Validate Events and Prop Types #preview Ready for your weekly Vue & Nuxt dose?
Validate Events and Prop Types
There're 2 approaches to adding a reactive state to Vue components using the Composition API. And you must choose whether to utilize reactive(), ref(), or both.
In this article, I'll explain how you can choose whether to utilize reactive, ref, or both.
Hi 👋
I'm still busy working on my talk for Vue.js Live 2023. As a preparation, I wrote an article about the topic "Ref vs. Reactive: What to Choose Using Vue 3 Composition API?" which is linked at top of this issue.
This issue is packed full of amazing articles about Vue, Nuxt and Web Development in general. I hope you enjoy it!
Have a lovely week ☀️
To support me:
- 😘 Recommend the newsletter to your friends: it really helps!
- 💸 Sponsor the newsletter
- 🧵 Retweet the latest Twitter thread
- 📨 Reply to this email: feedback is welcome
You can validate prop types and events in Vue. If a requirement is not met, Vue will warn you in the browser's JavaScript console.
Such validations are typically used if your component is intended to be used by others.
Prop Type Validation
In <script setup>, only the function argument of defineProps() supports custom validator functions (as of Vue 3.2.31).
To specify a prop validation function, you can provide an object with validation requirements to the defineProps() macro:
1 <script setup>
2 defineProps({
3 type: {
4 type: String,
5 default: 'success',
6 validator(value) {
7 // The value must match one of these strings
8 return ['success', 'warning', 'danger'].includes(value)
9 },
10 },
11 })
12 </script>
Let's pass an invalid type to the component:
1 <template>
2 <Component type="invalid" />
3 </template>
Vue will produce a console warning (if using the development build):
Invalid prop: custom validator check failed for prop "type"
Events Validation
It's also possible to validate an emitted event.
You need to assign a function that receives the emit call's arguments. The function returns a boolean to indicate whether the event is valid or not:
1 <script setup>
2 const emit = defineEmits({
3 // No validation
4 click: null,
5
6 // Validate update event
7 update: (value) => {
8 if (value) {
9 return true
10 } else {
11 console.warn('Invalid value event payload!')
12 return false
13 }
14 },
15 })
16 </script>
17
18 <template>
19 <button @click="$emit('update')">Update</button>
20 </template>
StackBlitz Example
You can try it yourself in the following StackBlitz project:
| 👉🏻 This article looks at the newest version of Nuxt DevTools, a visual tool for understanding Nuxt apps. |
| 👉🏻 Nuxt DevTools was created to help developers find performance bottlenecks and help manage apps and configurations. |
👉🏻 Handling migrations within long-term projects can be tough, and this is an interesting deep dive into how one team did it.
www.smashingmagazine.com👉🏻 Michael shows how to use Supabase in a Nuxt 3 middleware to block users who aren’t logged in.
masteringnuxt.com👉🏻 This article will explore the differences between watch and watchEffect and when to use each.
fadamakis.com👉🏻 Akanni takes a look at Vuetify 3 and "how it compares to its former counterpart, and get clear on the new features as well as breaking changes".
medium.com👉🏻 Dmitri explains use v-model to bind form inputs in Vue 3.
dmitripavlutin.com| 👉🏻 Elian explains in this article how Vue developers can get started with Astro. |
| 👉🏻 Astro is a new content focused website builder that focuses on shipping less JavaScript. |
| 👉🏻 The Sonner toast component but for Vue. |
| 👉🏻 It's customizable, but styled by default. |
| 👉🏻 Comes with a swipe to dismiss animation. |
👉🏻 “The single best feature of Vite, as far as I’m concerned, is its simplicity. Compared to the nightmare of configuring WebPack and Babel? Vite is delightfully easy to use.”
cloudfour.com| This article gives solutions for the following GitHub Actions problems: |
| 👉🏻 Dependency caching |
| 👉🏻 Cancelation of stale executions |
| 👉🏻 Path filtering |
| 👉🏻 Timeouts |
👉🏻 This library provides a set of composable functions for the type-level that enable developers to transform TypeScript types using familiar functions.
github.com| 👉🏻 Responsively highlight search results within a textarea element without interfering with its operation |
| 👉🏻 Live Demo: https://wstaeblein.github.io/texthighlighter/ |
Until next week,
Holzapfelkreuther Str. 19, 81375 Munich, Germany
