Javascript is required
Weekly Vue News Logo Weekly Vue News
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 5px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #88 - Validate Events and Prop Types #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #88

Validate Events and Prop Types

Ref vs. Reactive: What to Choose Using Vue 3 Composition API?

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:

Vue Tip: Validate Events and Prop Types

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>
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 },

Let's pass an invalid type to the component:

2 <Component type="invalid" />

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>
2const emit = defineEmits({
3 // No validation
4 click: null,
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 },
19 <button @click="$emit('update')">Update</button>

StackBlitz Example

You can try it yourself in the following StackBlitz project:

⚑ Open Demo
Curated Vue ContentπŸ“• Introducing Nuxt DevTools
πŸ‘‰πŸ» 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.
πŸ“• Moving From Vue 1 To Vue 2 To Vue 3: A Case Study Of Migrating A Headless CMS System

πŸ‘‰πŸ» Handling migrations within long-term projects can be tough, and this is an interesting deep dive into how one team did it.
πŸ“• Protecting Routes in Nuxt 3

πŸ‘‰πŸ» Michael shows how to use Supabase in a Nuxt 3 middleware to block users who aren’t logged in.
πŸ“• Vue 3: watchEffect is Impressive, but watch is still the Best Choice

πŸ‘‰πŸ» This article will explore the differences between watch and watchEffect and when to use each.
πŸ“• Exploring Vuetify 3

πŸ‘‰πŸ» 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".
πŸ“• How to Use v-model with Form Inputs in Vue

πŸ‘‰πŸ» Dmitri explains use v-model to bind form inputs in Vue 3.
πŸ“• Getting Started with Astro for Vue Developers
πŸ‘‰πŸ» 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.
πŸ› οΈ Vue Sonner
πŸ‘‰πŸ» TheΒ SonnerΒ toast component but for Vue.
πŸ‘‰πŸ» It's customizable, but styled by default.
πŸ‘‰πŸ» Comes with a swipe to dismiss animation.
Quote of the weekCurated Web Development ContentπŸ“• In Praise of Vite

πŸ‘‰πŸ» β€œ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.”
πŸ“• Common Pitfalls Of GitHub Actions
This article gives solutions for the following GitHub Actions problems:
πŸ‘‰πŸ» Dependency caching
πŸ‘‰πŸ» Cancelation of stale executions
πŸ‘‰πŸ» Path filtering
πŸ‘‰πŸ» Timeouts
πŸ› οΈ Higher-Order TypeScript (HOTScript)

πŸ‘‰πŸ» This library provides a set of composable functions for the type-level that enable developers to transform TypeScript types using familiar functions.
πŸ› οΈ Text Highlighter
πŸ‘‰πŸ» Responsively highlight search results within a textarea element without interfering with its operation
πŸ‘‰πŸ» Live Demo:
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
Β© 2023 All rights reserved.