#title Weekly Vue News #95 - Chaining Event Modifiers #preview Ready for your weekly Vue & Nuxt dose?
Chaining Event Modifiers
Hi 👋
In this issue, I've got a Vue tip about chaining event modifiers and many interesting articles & videos about Vue and web development in general.
I'm currently not working on any specific side project, we focus on the arrival of our baby in August and try to get our woodwork done before.
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
Most likely you have already called event.preventDefault() or event.stopPropagation() inside event handlers:
1 <script setup lang="ts">
2 function onClick(event: Event) {
3 event.preventDefault()
4
5 // ... some other logic
6 }
7 </script>
8
9 <template>
10 <button @click="onClick">Click me</button>
11 </template>
As you can see, you can easily implement this functionality using methods. but as an alternative, Vue provides event modifiers.
Using these modifiers your method contains only the data logic and the DOM event details are part of the template:
1 <script setup lang="ts">
2 function onClick(event: Event) {
3 // ... some other logic
4 }
5 </script>
6
7 <template>
8 <button @click.prevent="onClick">Click me</button>
9 </template>
Vue provides the following event modifiers:
.stop.prevent.self.capture.once.passive
You can also chain modifiers:
1 <script setup lang="ts">
2 function onClick(event: Event) {
3 // ... some other logic
4 }
5 </script>
6
7 <template>
8 <button @click.stop.prevent="onClick">Click me</button>
9 </template>
The sequence of modifiers is significant as the corresponding code is generated in the exact order they appear.
An example: Using @click.prevent.self will prevent click's default action on the element itself and its children, while @click.self.prevent will only prevent click's default action on the element itself.
Do not use .passive and .prevent together.
By using the .passive modifier, you are effectively signaling to the browser that you have no intention of preventing the default behavior of the event.
| 👉🏻 Jakub explains the new generics compiler feature in Vue 3.3 |
| 👉🏻 This feature brings a new level of flexibility and reusability to Vue.js components as it allows us to create dynamically typed component slots or emits. |
| 👉🏻 Daniel will hook up the chat widget to Open AI’s Chat API (GPT 3.5 Turbo) and work on nice AI-generated responses to the user’s messages. |
| 👉🏻 This video was part of Vue.js Forge Episode 3. |
| 👉🏻 A module developed by the NuxtLabs team. |
| 👉🏻 Its goal is to provide everything related to UI when building a Nuxt app. |
| 👉🏻This includes components, icons, colors, dark mode but also keyboard shortcuts. |
| 👉🏻 The popover API is a new set of declarative HTML APIs for building popovers that will come to browsers soon starting with Chromium 114. |
| 👉🏻 TypeScript’s analyzer understands types written in the JSDoc format. |
| 👉🏻 Although this is possible, the TypeScript syntax is "just a lot nicer and less repetitive". |
| 👉🏻 The popover API is a new set of declarative HTML APIs for building popovers that will come to browsers soon starting with Chromium 114. |
| 📕 Introducing Baseline |
| 👉🏻 A new initiative (announced at Google I/O) to help you quickly see whether a feature or API is safe to use in your site or web apps. |
| https://web.dev/introducing-baseline/ |
| 👉🏻 Tailwind Variants combines the power of Tailwind with a first-class variant API. |
| 👉🏻 It features slots, responsive variants, component composition, and more. |
| 👉🏻 It is framework agnostic. |
| 👉🏻 A mobile document scanner implemented in pure JavaScript. |
Until next week,
Holzapfelkreuther Str. 19, 81375 Munich, Germany
