Mastering Nuxt

Have you started using Nuxt 4?

If not, what are you waiting for?

Did you know that if you return null from a Nuxt event handler, h3 will automatically respond with a 204 No Content status? This makes it easy to signal empty responses without extra configuration. 😏

💡Tip of the day:
If we wanted to make a basic link shortener service in Nuxt, we can do that pretty easily using a server route and sendRedirect.

We’ll create this file at `server/route/link/[hash].ts`:

🚀 Nuxt devs! The Official Vue.js Free Weekend by Certificates.Dev is coming Aug 23–24! Get 48h FREE access to Vue.js Mid-Level Cert Training, perfect for Nuxt skills.

Code challenges, trial exam & more! Sign up:
https://certificates.dev/vuejs/free-weekend

If the validation fails, returning `false` will prevent navigation to the page.

With Nuxt, you can use the `validate` property inside `definePageMeta` to check if a route is valid before navigating to a page. 🤓

This is especially useful when multiple pages could match a route, and you want to ensure the parameters are correct. ⬇️

💡Tip of the day:
Nitro, the server that Nuxt uses, comes with a very powerful storage system.

You can configure it to store data in your filesystem, database, a key-value store, and many other places:

You can use these hooks to run custom logic at different stages of the server lifecycle.

Did you know that when working with Nuxt, the `nitroApp` object inside plugins gives you access to various runtime hooks?

These hooks include `close`, `error`, `render:response`, `request`, `beforeResponse`, and `afterResponse`. ⬇️

Did you know that with Nuxt, you can access the entire payload sent from the server to the client using the `useNuxtApp` composable? 💻

This allows you to inspect all the data and state transferred during SSR or hydration.

It waits for Nuxt to finish hydrating and then schedules your task using `requestIdleCallback`, so it runs when the browser is idle.

💡Tip of the day:
In Nuxt you can use the `onNuxtReady` composable to load heavy resources or execute code on the client side without blocking the main thread.

⬇️

Mastering Nuxt | The official courses for learning Nuxt The complete guide to developing and deploying fast, production-ready Nuxt apps. MasteringNuxt is the most in-depth, fun, and realistic course made on Nuxt.

Use the code: `NUXT4RDY` at checkout. 🎟️

The full curriculum is live:
✅ 12 chapters
✅ 110+ lessons
✅ 1 production-ready fullstack Nuxt 4 app

Mastering Nuxt | The official courses for learning Nuxt The complete guide to developing and deploying fast, production-ready Nuxt apps. MasteringNuxt is the most in-depth, fun, and realistic course made on Nuxt.

The celebration for completing Mastering Nuxt Full Stack Unleashed is ending soon! 🥳

Get the full Nuxt 4 experience – with everything from GitHub OAuth and route middleware to typed errors, and an AI-powered chatbot – at the early access price. 👇

vist.ly/3zrv4

📕 Nuxt x Vercel: A Reflection on Belief and Trust

👉🏻 Read why Magic as a Service™ chose Vue and Nuxt years ago.

https://maas.engineering/posts/reflections-on-nuxt

🌱 Released H3.dev (beta 2 and 3) today:

- Middleware `next()` does not need explicit return
- Unhandled errors are logged by default
- Experimental `defineRoute`
- New `app.request` method
(stricter `app.fetch` for runtime safety)

We are closer to the stable v2 release 💪

💡If you need more flexibility, Nuxt lets you use inline middleware in `definePageMeta` instead of `validate`.

Note that you can't use both `validate` and `middleware` together, but you can refactor your validation logic into a middleware function for more advanced use cases.

How long have you been writing Nuxt? 💚

These hooks help you further customize the server-side rendering process.

💡Tip of the day:
In addition to standard Nitro hooks, Nuxt adds extra hooks you can use in your plugins.

These include `dev:ssr-logs` for server-side logs, `render:html` before server rendering, and `render:island` before rendering an island component.

👇

Nuxt 4 is here! Open this to learn more: 👇Since Mastering Nuxt: Full Stack Unleashed is fully up-to-date, you can start learning Nuxt 4 now.--Our plan is to... Mastering Nuxt Fullstack Unleashed is Now Complete

To celebrate this, we have a special offer until 31 July: 🎟️
If you haven't purchased the course yet, get an extra $50 off by using the code `NUXT4RDY`.
If you have purchased it, share this offer with a friend!

Nuxt 4 is here! Open this to learn more: 👇Since Mastering Nuxt: Full Stack Unleashed is fully up-to-date, you can start learning Nuxt 4 now.--Our plan is to... Mastering Nuxt Fullstack Unleashed is Now Complete

Since `Mastering Nuxt: Full Stack Unleashed` is fully up-to-date, you can start learning Nuxt 4 now. 💚

We plan to keep this course updated as Nuxt changes, and eventually add more courses so that you can go even deeper in your understanding.

There are more below 👇
https://youtu.be/TJhct1LlFws

Hey folks! Do you have any cool tips or tricks, or anything else that you think the Nuxt community should know about?

If so, don't hesitate to leave a comment, and we'll share it with our audience, attributing you.
Or if it's a longer post, feel free to DM us. 🤗

💡Tip of the day:
In Nuxt you can return an error directly from the `validate` function in `definePageMeta` if something is wrong with the route parameters.

This is helpful for showing custom error messages, such as when a chapter does not exist in a course.

💁‍♀️ With Nuxt, when you set `keepalive: true` in the `definePageMeta` of a child page, its state will be preserved even when navigating between sibling pages.
✅ This ensures that switching between child routes does not reset their state, regardless of the parent or `NuxtPage` settings.

📢 We've been working on this for a long time, and it's finally ready!

The complete official course for Nuxt 4 is now available!
To celebrate, we're giving you a redeem code—use NUXT4RDY at checkout.

✅110+ Lessons
✅AI-powered project
✅& more

https://masteringnuxt.com/2025/redeem

💡 Tip of the day:
In Nuxt you can provide a key to `callOnce`, similar to how you use keys with `useFetch` or `useAsyncData`.

This is useful when you need to track execution for multiple items or contexts, ensuring each unique key only runs its associated code once:

Did you know that by default, Nuxt composables like `useFetch` and `useAsyncData` will reactively re-fetch data as their parameters are updated? 🙆‍♂️

This means that any change in the parameters will cancel the current request and start a new one automatically.

When building with Nuxt, how do you approach SEO optimization?

Are you using the Nuxt SEO module by Harlan Wilton?

Any tips or pitfalls to avoid? 👀

GitHub - nuxt-modules/supabase: Supabase module for Nuxt. Supabase module for Nuxt. Contribute to nuxt-modules/supabase development by creating an account on GitHub.

@nuxt.com x @supabase.com module is now compatible with Nuxt 4 ☑

👉 github.com/nuxt-modules...