Don't miss the next edition. Subscribe to the newsletter.
Published at Mar 24, 2025, 3:00 PMDynamic Event Names Ready for your weekly Vue & Nuxt dose? Weekly Vue News #190 Dynamic Event Names View online Hi 👋 No personal updates this week — just a bunch of interesting Vue & Nuxt content for you. Enjoy this issue and have a lovely week ☀️ Vue 🛠️ ScriptShifter 👉🏻 A tool that converts Vue components from Options API to Composition API. 🛠️ code-inspector 👉🏻 Once installed, use ALT+SHIFT to position your cursor at that location in the code in your IDE. 👉🏻 Supports a number of tools and frameworks (React, Vue, Webpack, etc) along with 10+ IDEs. 💡 Vue Tip: Dynamic Event Names Did you know you can use dynamic event names in Vue? Instead of hardcoding event listeners, you can bind them dynamically using v-on (@) v-on (@) with computed event names: 1 script setup lang = " ts " > 2 const event = ref ' mouseover ' | ' click ' >( ' mouseover ' ); 3 4 const buttonLabel = computed (() => 5 event . value === ' mouseover ' ? ' Hover Me ' : ' Click Me ' 6 ); 7 8 const onHandleEvent = () => { 9 console . log ( ' Event triggered: ' , event . value ); 10 }; 11 script > 12 13 template > 14 div > 15 div > 16 span > Select an event type: span > 17 div > 18 label > 19 input type = " radio " name = " event " v-model = " event " value = " mouseover " /> 20 On Hover 21 label > 22 23 label > 24 input type = " radio " name = " event " v-model = " event " value = " click " /> 25 On Click 26 label > 27 div > 28 div > 29 button @[ event ]= " onHandleEvent " > Click or hover button > 30 div > 31 template > You can try it yourself in this StackBlitz playground: ✨ Open Demo Nuxt 📕 Nuxt on the Edge with Cloudflare Workers 👉🏻 "I stepped out of Vercel's comfort zone into Cloudflare's edge ecosystem. Here's what I learned about deploying Nuxt apps on Cloudflare Workers." 📕 How to use Prisma ORM with Nuxt 👉🏻 This guide explains how to set up a Nuxt application, configure Prisma Postgres using the Prisma Nuxt module, and deploy the project to Vercel for production. 📕 How to Create Dynamic OG Images in Nuxt 👉🏻 This article walks through how to create dynamic OG images in Nuxt, step-by-step. 📕 Integrating an ASP.NET Core API with a Nuxt Front End: A Step-by-Step Guide 👉🏻 This article walks you through the process of integrating an ASP.NET Core API with a Nuxt frontend. 📹 Why is Nuxt 3.16 Even Faster? 👉🏻 Learn how Nuxt 3.16 makes your app even faster, for example by using lazy hydration. 📹 Pro Nuxt Workflow: Boost Productivity with the Nuxt.js Ecosystem 👉🏻 The Nuxt ecosystem is full of tools to boost your productivity. 👉🏻 Level up your workflow by learning how take advantage of them. 🛠️ nuxt-commerce 👉🏻 A high-performance, server-rendered E-commerce app built with Nuxt & Shopify. 👉🏻 It uses Nuxt UI, image & scripts optimization, hybrid rendering, SEO and more. 📅 Events Vueconf.US (13 - 15 May 2025, Tampa, Florida) MadVue (29 May 2025, Madrid, Spain) PragVue (23 September 2025, Czech Republic) 💬 Quote of the week 🧑🏻💻 In Other News 📕 JavaScript 👉🏻 There is an increasing reliance on JavaScript in web dev and its impact on performance. 👉🏻 Key findings include a rise in JavaScript volume and requests, alongside the growing use of optimization techniques like Brotli compression and dynamic imports. 📕 Learn Zod So You Can Trust Your Data and Your Types 👉🏻 Zod is a convenient TypeScript validation library. 👉🏻 This post gives you the overview of what Zod is, why you might use it, the main concepts and general pattern of usage. 🎮 Divided We Fall 👉🏻 Learn HTML and CSS with this fun browser game. 🛠️ Node Modules Inspector 👉🏻 Visualizes and allows inspection of `node_modules` directories in pnpm and npm projects. 😂 Fun 🔗 Want more Vue & Nuxt content? More Exclusive Vue Tips : Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Weekly Vue & Nuxt Videos : You must subscribe Alexander Lichter's YouTube channel if you are interested in Vue & Nuxt. DejaVue Podcast : A weekly podcast about Vue.js and the ecosystem around it. Comments? Join the discussion about this issue in our Discord community . Until next week, Michael Hoffmann (Curator) To support me: 😘 Recommend the newsletter to your friends: it really helps! 💸 Sponsor this newsletter 🦋 Repost the latest BlueSky post 📨 Reply to this email: feedback is welcome * Some of my links are affiliate links; if you make a purchase, I gain a small percentage at no extra cost. Thank you for supporting my newsletter. Unsubscribe Holzapfelkreuther Str. 19, 81375 Munich, Germany {{ TrackView }}