Weekly Vue News #114 - Event Handling

Weekly Vue News #114

Event Handling

Hi 👋

the 3rd annual Nuxt Nation Conference is next week, it's all happening on October 18-19! You can find more information in the events section below.

In this issue, I share some tips on event handling in Vue. I hope you find them useful!

Nothing else to add this week, so let's dive into the news!

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

📕 All we know about Vue 3's Vapor Mode ...until now

👉🏻 Vapor Mode is a new and alternative compilation strategy inspired by Solid.js.

👉🏻 It aims to enhance your apps' performance by compiling your code into a more efficient JavaScript output.

icarusgk.hashnode.dev

📕 Learn WebSockets by Building a Vue Chat Application

👉🏻 In this article, you'll delve into the intricacies of WebSockets, exploring its potential by building a real-time chat app with Vue.

morioh.com

📕 Clean Layout Architecture for Vue Applications

👉🏻 Fotis concluded on a layout architecture for Vue apps that works well and scales without headaches.

fadamakis.com

🎧 Creator of Vue.js and Vite: Evan You's Journey From Google Engineer to Open Source Pioneer

👉🏻 Evan You, the creator of Vue.js and Vite, discusses his journey to becoming an independent open-source developer.

www.thisdot.co

🛠️ Lunar UI

👉🏻 Fabulous Tailwind CSS components for Vue & Nuxt to create stunning land pages.

lunarui.dev

🛠️ Nue

👉🏻 A powerful React, Vue, Next.js, Vite, and Astro alternative.

👉🏻 Planned to be part of a full tooling ecosystem similar to Vite.

nuejs.org

Nuxt

🥳 Nuxt Studio

👉🏻 Nuxt Studio is out of beta and open to everyone

👉🏻 Nuxt Studio is the git-based CMS powered by Nuxt Content.

nuxt.studio

📕 Integrate Sentry with your Nuxt 3 application - A Recipe

👉🏻 In this article, you'll learn why it takes longer than writing an average module.

👉🏻 It also provides a simple example recipe for your own Nuxt 3 project.

www.lichter.io

📹 Is Nuxt 3's runtimeConfig UNSAFE?!

👉🏻 In this video, you'll dive deep into Nuxt 3's runtimeConfig to explore its potential security implications if handled wrongly.

www.youtube.com

🛠️ Nuxt UI v2.9 is out

👉🏻 30% lighter default entry bundle

👉🏻 Leverage tailwind-merge for smarter class merging

👉🏻 10 bug fixes

github.com

📅 Events

Nuxt Nation 2023

Great news for everyone interested in the latest Nuxt 3 developments being cooked up by Nuxt Labs!

The 3rd annual Nuxt Nation Conference is next month!

🗓️ It's all happening on October 18-19!

The conference will feature a variety of Nuxt-related topics, including:

🖼️ Nuxt Image

🔒 Nuxt Security

👐 Open Source

🛠️ Nuxt DevTools

✨ Nuxt Performance

⌨️ Nuxt as Backend

🍍 Nuxt with Pinia

…and much, much more.

Vue School, in its mission to make learning accessible to all, is giving everyone from the Vue and Nuxt communities (and beyond) the opportunity to sign up for this FREE event - so hurry up and reserve your ticket now!

See you there! 🚀

North America's premier Vue.js Conference

👉🏻 9-10 November 2023, Toronto, Canada.

www.vuetoronto.com

💬 Quote of the week

🔥 Vue Tip: Event Handling

In Vue, you can listen for events using the v-on directive or the shorthand @. You can listen for any DOM event; for example, you can use @click for click events. This link contains a list of all native DOM events.

Define Events

Of course, you can also listen for custom events that you have defined in your child component:

Child.vue

            1 <script setup lang="ts">
              2 import { ref } from 'vue'
              3 
              4 const counter = ref(0)
              5 
              6 const emit = defineEmits<{
              7   (event: 'update:counter', counter: number): void
              8 }>()
              9 
              10 const increment = () => {
              11   counter.value++
              12   emit('update:counter', counter.value)
              13 }
              14 </script>
              15 
              16 <template>
              17   <div>
              18     <span>Counter: {{ counter }}</span>
              19     <button @click="increment">Increment</button>
              20   </div>
              21 </template>

Handle Events

If your event does not have any arguments, I prefer this syntax:

Parent.vue

            1 <script setup lang="ts">
              2 import Child from './Child.vue'
              3 
              4 const onUpdateCounter = (counter: number) => {
              5   console.log('onUpdateCounter', counter)
              6 }
              7 </script>
              8 
              9 <template>
              10   <Child @update:counter="onUpdateCounter" />
              11 </template>

If you want to access the custom event object in your event handler, you can use the following syntax:

Parent.vue

            1 <script lang="ts" setup>
              2 import type { Counter } from '...'
              3 
              4 const counters: Counter[] = [
              5   // ...
              6 ]
              7 
              8 function onUpdateCounter(counter: Counter) {
              9   // ...
              10 }
              11 </script>
              12 
              13 <template>
              14   <ul>
              15     <li v-for="counter of counter" :key="counter.id">
              16       <Child @update:counter="() => onUpdateCounter(counter)" />
              17     </li>
              18   </ul>
              19 </template>

Sometimes, you need access to your custom event object and the native event object. In this case, you can use the following syntax:

Parent.vue

            1 <script lang="ts" setup>
              2 import type { Counter } from '...'
              3 
              4 const counters: Counter[] = [
              5   // ...
              6 ]
              7 
              8 function onUpdateCounter(event: Event, counter: Counter) {
              9   // ...
              10 }
              11 </script>
              12 
              13 <template>
              14   <ul>
              15     <li v-for="counter of counter" :key="counter.id">
              16       <Child @update:counter="($event) => onUpdateCounter($event, counter)" />
              17     </li>
              18   </ul>
              19 </template>