Weekly Vue News #128 - Check if Component Has Event Listener Attached

View and discuss online,

Weekly Vue News #128

Check if Component Has Event Listener Attached

Hi 👋

I finished the redesign of my portfolio website with Nuxt UI Pro, and I'm delighted with the result.

Besides that, I'm working on providing lifetime deals for CodeSnap.dev.

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

📕 What to expect from Vue.js in 2024

👉🏻 This article takes a look at the current state of Vue and predicts where things might be headed in 2024.

vueschool.io

📕 Vue 2 is Dead, Long Live Vue 2!

👉🏻 A tribute for Vue 2 which is no longer officially supported since this year.

fadamakis.com

📕 VueFire is now stable

👉🏻 VueFire, a first class Vue and Firebase experience — including support for Nuxt, is now stable

firebase.blog

🛠️ Micleo

👉🏻 A SaaS / CRM starter kit made with Vue that includes many features from authentication to billing.

micleo.com

Nuxt

📕 Is Nuxt 3 Really Production Ready?

👉🏻 Lukas shares some thoughts on using Nuxt in production and what to be aware of if you decide to do so.

dev.to

📕 Creating Mobile Apps with Nuxt 3 and Capacitor

👉🏻 Learn how to create a mobile app with Nuxt 3, Capacitor, and a native UI with Konsta UI.

'https://capgo.app/blog/building-a-native-mobile-app-with-nuxt-3-and-capacitor/

📹 The BEST way to proxy your API in Nuxt

👉🏻 How a successful proxy strategy looks like

👉🏻 All common strategies - From Vite's proxy to a Nitro proxy endpoint

👉🏻 Which strategies to use and how to implement them

www.youtube.com

🛠️ Announcing `@nuxt/test-utils` v3.9

👉🏻 The team merged `nuxt-vitest` and `vitest-environment-nuxt` into a single repository for both runtime unit testing and e2e/browser testing with Nuxt.

github.com

📅 Events

Vue.js Nation Conference

👉🏻 24 - 25 January 2024, Online Live Event

👉🏻 100% free

vuejsnation.com

Vuejs Amsterdam 2024

👉🏻 28 - 29 February 2024, Amsterdam

vuejs.amsterdam

Vueconf US 2024

👉🏻 22 - 24 May 2024, New Orleans, US

vueconf.us

Sponsored

The Boring JavaScript Stack

The ethos of The Boring JavaScript Stack is this 👇🏾

You can use your favorite frontend framework and build Modern Single Page Applications(SPA) without the hassle of the complexities that building SPA the traditional way bring to the table.

💬 Quote of the week

🔥 Vue Tip: Check if Component Has Event Listener Attached

Sometimes, you want to apply specific styles to a component only if it has an event listener attached. For example, you might want to add a cursor: pointer style to a component only if it has a click event listener attached.

In Vue 3, you can check the props on the current component instance for that purpose:

Child.vue

            1 <script setup lang="ts">
              2 import { computed, ref, getCurrentInstance } from 'vue';
              3 
              4 defineEmits(['click', 'custom-event']);
              5 
              6 const hasClickEventListener = computed(
              7   () => !!getCurrentInstance()?.vnode.props?.onClick
              8 );
              9 const hasCustomEventListener = computed(
              10   () => !!getCurrentInstance()?.vnode.props?.['onCustomEvent']
              11 );
              12 </script>

Parent.vue

            1 <script setup lang="ts">
              2 import Child from './components/Child.vue';
              3 
              4 const onClick = () => console.log('Click');
              5 const onCustomEvent = () => console.log('Custom event');
              6 </script>
              7 
              8 <template>
              9   <Child />
              10   <Child @click="onClick" @custom-event="onCustomEvent" />
              11 </template>

In Vue 2, you can use the vm.$listeners property:

Component.vue

            1 <script>
              2 computed:{
              3   hasClickEventListener(){
              4     return this.$listeners && this.$listeners.click
              5   }
              6 }
              7 </script>