Javascript is required
Weekly Vue News Logo
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 8px 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 #95 - Chaining Event Modifiers #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, 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:

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">
2function 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">
2function 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">
2function 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.

FunCurated 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 weekCurated 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 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.
Make sure to stay up to date about new features, best articles and tools in the Vue & Nuxt ecosystem by subscribing to the newsletter.Get one email per week | 100% free
I will never share any of your personal data.
Β© 2023 weekly-vue.news. All rights reserved.