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">  2const event = ref<'mouseover' | 'click'>('mouseover');  3  4const buttonLabel = computed(() =>  5  event.value === 'mouseover' ? 'Hover Me' : 'Click Me'  6);  7  8const 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.