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:

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)