Weekly Vue News #95

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

Vue Tip: Chaining Event Modifiers

Most likely you have already called event.preventDefault() or event.stopPropagation() inside event handlers:

Component.vue


          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:

Component.vue


          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:

Component.vue


          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.

Fun

Curated Vue & Nuxt Content

📕 Welcome generics in Vue

👉🏻 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.

www.frsource.org

📹 Code a Vue Powered ChatGPT by Daniel Roe

👉🏻 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.

www.youtube.com

🛠️ NuxtLabs UI

👉🏻 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.

ui.nuxtlabs.com

Quote of the week

Curated Web Development Content

📕 Introducing the popover API

👉🏻 The popover API is a new set of declarative HTML APIs for building popovers that will come to browsers soon starting with Chromium 114.

developer.chrome.com

📕 Get full type support with plain JavaScript

👉🏻 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".

www.pausly.app

📕 Introducing the popover API

👉🏻 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/

developer.chrome.com

🛠️ Tailwind Variants

👉🏻 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.

www.tailwind-variants.org

🛠️ jscanify

👉🏻 A mobile document scanner implemented in pure JavaScript.

github.com

Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator)

Share via

Facebook

Twitter

Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany