Access Dynamic Parameters In Your Nuxt Server Routes

Ready for your weekly Vue & Nuxt dose?

‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏

Weekly Vue News #137

Access Dynamic Parameters In Your Nuxt Server Routes

View online

Hi 👋

I'm taking things easy at the moment and not diving into any new side projects.

Just putting all my energy into the ones I'm already running. Let's keep the momentum going!

Have a nice week ☀️

Vue

📕 Common Mistakes in Vue.js

👉🏻 In this blog article, Daniel explains some common mistakes developers make when working with Vue and provide practical advice on how to avoid them.

📕 How to Build Accessible Vue.js Applications

👉🏻 This article by Vue Mastery serves as a guide for you to learn the strategies for building inclusive applications using Vue.

📕 First-class Vue support with Volar and Storybook 8

👉🏻 Storybook strengthens its Vue.js support by integrating Vue's official language tools (built on Volar).

📹 A Better Way To Handle Vue Props?

👉🏻 John shows you how you can use v-bindv-bind in your Vue.js application.

🛠️ Vue DevTools

👉🏻 v6.6.0 introduces a completely new UI for our beloved Vue DevTools.

Nuxt

🥳 Nuxt v3.11 is out

🪵 Better logging

🎨 Preview mode

💰 Cache-busting payloads

👮‍♂️ Middleware routeRules

⌫ New clear data fetching utility

and more...

📕 The Evolution of Shiki v1.0

👉🏻 Shiki is a syntax highlighter that uses TextMate grammars and themes, the same engine that powers VS Code.

👉🏻 Learn how Nuxt drove the evolution of Shiki.

📹 Mastering Advanced Nuxt.js with Daniel Roe

👉🏻 This training from Daniel Roe dives into advanced concepts, best practices, and techniques for building highly-performant Nuxt web applications.

📹 An environment-aware Nuxt Configuration

👉🏻 Alexander explains, how you can change your Nuxt configuration for test, development or production environments.

📅 Events

Vue.js Live Conference

👉🏻 25 - 26 April 2024, Online

Vueconf US 2024

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

vuejs.de Conf

👉🏻 8 - 9 October 2024, Bonn, Germany

💬 Quote of the week

🔥 Nuxt Tip: Access Dynamic Parameters In Your Nuxt Server Routes

Server routes in Nuxt 3 can use dynamic parameters within brackets in the file name like /api/[user]/[id].ts/api/[user]/[id].ts.

You can access them via the getRouterParamgetRouterParam util function:

1// Examplary request URL: /api/mokkapps/123
2
3export default defineEventHandler((event) => {
4  const id = getRouterParam(event, 'id');
5  const user = getRouterParam(event, 'user');
6
7  return `Hello, ${user} with ID ${id}!`;
8});

😂 Fun

🧑🏻‍💻 In Other News

📕 Feature flags are ruining your codebase

👉🏻 Feature flags are a valuable tool for separating code deployment from feature releases, but their overuse can complicate codebases and hinder testing.

📕 Open-sourcing our progress on Tailwind CSS v4.0

👉🏻 v4.0 Alpha is a major update that introduces a faster engine, streamlined configuration, and new features.

👉🏻 Built with Rust and Lightning CSS.

📕 Reporting Core Web Vitals With The Performance API

👉🏻 This article demonstrates how to use the Performance API to generate performance metrics directly in the DOM to create your own reporting.

📕 Local-first software

👉🏻 Local First software is how to build the fastest most native feeling apps.

📕 Ultimate Guide to Visual Testing with Playwright

👉🏻 An extensive article that explains what visual tests are and when they should be used.

🛠️ Rolldown

👉🏻 A JavaScript bundler written in Rust intended to serve as the future bundler used in Vite.

👉🏻 It provides Rollup-compatible APIs and plugin interface.

👉🏻 It's currently in active development and not usable for production yet.

Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator)

Unsubscribe from this newsletter

Holzapfelkreuther Str. 19, 81375 Munich, Germany