iiinova — where your digital self keeps evolving

Mastering Nuxt @masteringnuxt.com · 24/02/2026

Nuxt Tip 💡 The stale-while-revalidate pattern: Serve fast, update in background. Users get instant responses (even if slightly stale) and the cache rebuilds in the background. Here's how you can do this in Nuxt/ Nitro.👇

030

Mastering Nuxt @masteringnuxt.com · 17/02/2026

Nuxt 4's cachedEventHandler is a fantastic feature.🔥 All you do is wrap your API routes to cache responses!

030

Mastering Nuxt @masteringnuxt.com · 10/02/2026

Unpopular opinion: Many plugins should be composables instead. Plugins load on every page. But composables load only when you use them.

020

Mastering Nuxt @masteringnuxt.com · 03/02/2026

Nuxt Tip 💡 Want to reduce your initial bundle size? Use the Lazy prefix on component. Components behind v-if still get bundled unless you add "Lazy" to the name. Then they only load when needed.

040

Mastering Nuxt @masteringnuxt.com · 01/01/2026

Happy 2026! 🎆 May your Nuxt apps load faster, your components stay lazy, and your dev workflow stay blissfully bug-free. What feature or improvement do you really hope Nuxt brings in 2026? 🔥

040

Mastering Nuxt @masteringnuxt.com · 30/12/2025

If you encounter an error during server-side rendering, Nuxt provides the `<NuxtClientFallback>` component to display fallback content. It shows a custom UI when a server-rendered component fails. You must enable it by setting `experimental.clientFallback` to `true`.

030

Mastering Nuxt @masteringnuxt.com · 24/12/2025

Happy Holidays from the Mastering Nuxt team 💚 We want to send a big thank you to our amazing community of devs & Nuxt enthusiasts. Here’s to more coding, creativity, and incredible Nuxt apps in 2026 💫

010

Mastering Nuxt @masteringnuxt.com · 22/12/2025

Nuxt Tip of the Week 💡 If you want to run code on the client before Nuxt does any initialization, use the `onPreHydrate` composable. This lets you manipulate the DOM or add event listeners using only vanilla JavaScript

040

Mastering Nuxt @masteringnuxt.com · 18/12/2025

Tip of the Day 💡 With @nuxt_js, 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.

010

Mastering Nuxt @masteringnuxt.com · 11/12/2025

Did you know that Nuxt Image v2 allows you to programmatically transform images from within your Nitro endpoint 👇

030

Mastering Nuxt @masteringnuxt.com · 26/11/2025

Nuxt Tip of the Day 💡 In Nuxt 4.2, you can pass in your own AbortController when data fetching if you need fine-grained control over when requests are canceled👇

020

Mastering Nuxt @masteringnuxt.com · 13/11/2025

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`, & `afterResponse`. You can use these to run custom logic at different stages of the server lifecycle.

020

Mastering Nuxt @masteringnuxt.com · 06/11/2025

Nuxt Tip Of The Week 💡 When you want to create a redirect in a server route, Nuxt lets you use the `sendRedirect` method from h3. By default, this sends a 302 (temporary) redirect, but you can specify a different status code if needed.

000

Mastering Nuxt @masteringnuxt.com · 14/10/2025

Nuxt Tip Of The Day💡 With Nuxt, since version 3.9, you can control how fetch requests are deduplicated using the dedupe parameter in the useFetch composable. By setting dedupe to 'cancel', the previous request is cancelled and a new one is made whenever parameters change.

030

Mastering Nuxt @masteringnuxt.com · 08/10/2025

Nuxt Tip💡 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.

010

Mastering Nuxt @masteringnuxt.com · 02/10/2025

💡 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.

040

Mastering Nuxt @masteringnuxt.com · 29/09/2025

Tip of the day 💡 When working with Nuxt, you can control where your code runs by checking the environment. Use if (!import.meta.server) to skip code on the server, and if (!import.meta.client) to skip code on the client.

020

Mastering Nuxt @masteringnuxt.com · 23/09/2025

When writing unit tests, Nuxt provides a way to opt-in to a Nuxt environment by adding `.nuxt.` to your test filenames. For example, you can name your test file like this 👇

020

Mastering Nuxt @masteringnuxt.com · 17/09/2025

Tip of the day 💡 In Nuxt you can pass route objects to `navigateTo`, similar to `router.push` in Vue Router. This enables navigation using named routes, query parameters, or hash fragments.

040

Mastering Nuxt @masteringnuxt.com · 07/09/2025

In Nuxt, you might need to display debug info or tools like a DevAccountSwitcher component that should only be visible during development. 🤓 To do this, wrap your component with a `<DevOnly>` tag in your layout file. This component will be excluded from your production build.

120

Mastering Nuxt @masteringnuxt.com · 06/09/2025

If you want to run code on the client before Nuxt does any initialization, use the `onPreHydrate` composable. This lets you manipulate the DOM or add event listeners using only vanilla JavaScript:

010

Mastering Nuxt @masteringnuxt.com · 05/09/2025

You can easily include global CSS files in every page by using the css config value in Nuxt. This gives you consistent styling across your entire Nuxt app.

010

Mastering Nuxt @masteringnuxt.com · 04/09/2025

Did you know that when using auth in a Nuxt app, we need to make sure that the cookie is passed from the frontend to the backend? 🙌 We can do that with useRequestHeaders (or useRequestHeader):

020

Mastering Nuxt @masteringnuxt.com · 03/09/2025

💡When working with Nuxt, it's common to need different configurations for dif. environments, like dev, testing, or prod. Instead of using conditional logic with `process.env.NODE_ENV`, you can use special keys in your Nuxt config for a cleaner and more type-safe approach.

040

Mastering Nuxt @masteringnuxt.com · 02/09/2025

💡 Tip of the day: Modules can only affect your Nuxt app during build time. But we can use methods from @nuxt/kit to do things that influence the runtime behaviour:

010

Mastering Nuxt @masteringnuxt.com · 31/08/2025

Did you know that when you need to set up redirects, Nuxt makes it easy using route rules in your configuration? 💻 You can define a redirect for any route, and by default, it uses a temporary 307 status code. This is the simplest & most efficient way to handle basic redirects.

020

Mastering Nuxt @masteringnuxt.com · 30/08/2025

For debugging purposes, Nuxt can add a custom class to a `NuxtLink` once its route has been prefetched. 🧠 You can specify this class using the `prefetched-class` prop, which helps you visually identify prefetched links during development.

030

Mastering Nuxt @masteringnuxt.com · 29/08/2025

💡Tip of the day: In Nuxt, you can validate the request body before using it by leveraging readValidatedBody from h3. Provide a validation function to ensure the body meets your requirements.

010

Mastering Nuxt @masteringnuxt.com · 28/08/2025

💡 Tip of the day: In Nuxt, you can check for specific error codes like 404 using the statusCode property from the useError composable. This lets you show a custom message for not found pages, while handling other errors differently.

010

Mastering Nuxt @masteringnuxt.com · 27/08/2025

Did you know with Nuxt, you can use `mountSuspended` to mount your app at a specific route by passing the App component and a route option? 💻 This is useful for testing route-specific content or behavior in your Nuxt application.

010

Mastering Nuxt @masteringnuxt.com · 26/08/2025

You can configure Nuxt to treat any folder as a global components directory by updating your `nuxt.config` file. 🗃️ For example, to add a custom folder for global components:

010

Mastering Nuxt @masteringnuxt.com · 25/08/2025

💡 Tip of the day: Within Nuxt, the `useLoadingIndicator` composable is used by the `<NuxtLoadingIndicator>` component. You can also trigger it manually in plugins using the `page:loading:start` and `page:loading:end` hooks.

010

Mastering Nuxt @masteringnuxt.com · 24/08/2025

When working with hydration in plugins, Nuxt provides the `useHydration` composable. 🧠 This utility lets you sync data between server and client by using hooks and the Nuxt payload system.

120

Mastering Nuxt @masteringnuxt.com · 23/08/2025

Did you know you can use the `useLoadingIndicator` composable in Nuxt to get detailed information about your page's loading state? It provides reactive values like `progress` and `isLoading`, which can be logged or used in your UI.

011

Mastering Nuxt @masteringnuxt.com · 22/08/2025

💡 Tip of the day: With Nuxt, you can have different `nuxt.config.ts` files for each layer, allowing each part of your app to have its own configuration. For example, your main app and a blog layer can each have their own config files with different modules and settings.

020

Mastering Nuxt @masteringnuxt.com · 21/08/2025

💡 Tip of the day: With Nuxt, you can use layers to provide child or parent routes seamlessly. By placing files inside nested folders within a layer's pages directory, you can create child routes that integrate naturally with your main app's routes:

010

Mastering Nuxt @masteringnuxt.com · 20/08/2025

Did you know that with Nuxt, you can retrieve the request body as a `Buffer` object using `readRawBody` from `h3`? Pass `false` as the second argument to get the raw buffer data. 👩‍💻

020

Mastering Nuxt @masteringnuxt.com · 19/08/2025

🧠 Here's something you may not know: If there’s an error with rendering your server component in Nuxt, there’s a `#fallback` slot that will be rendered on the client-side:

010

Mastering Nuxt @masteringnuxt.com · 18/08/2025

🚨 CertificatesDev’s Vue.js Free Weekend is THIS WEEKEND, Aug 23–24! 🆓 FREE 48h Official Vue.js Mid-Level Cert Training: Nuxt-ready challenges, trial exam & more. Join now: certificates.dev/vuejs/free-weekend

010

Mastering Nuxt @masteringnuxt.com · 17/08/2025

💡 Tip of the day: With Nuxt, you can create Vue utilities in the `~/utils` folder, and they are auto-imported into your Vue app. For example, a utility like `toArray` can be used directly in Vue components, route middleware, or composables. 👇

120

Mastering Nuxt @masteringnuxt.com · 16/08/2025

🧠 Did you know: With Nuxt, you can use the context property on the event object to add custom data in middleware, making it accessible in your server routes? This is useful for passing information like authentication status or user details throughout your app:

020

Mastering Nuxt @masteringnuxt.com · 15/08/2025

💡Tip of the day: When writing unit tests, Nuxt provides the `mountSuspended` helper, which allows you to mount any component within your Nuxt context, even if it uses async setup. This makes it easy to test components that rely on asynchronous data or lifecycle hooks.

010

Mastering Nuxt @masteringnuxt.com · 13/08/2025

💡 Tip of the day: To handle global errors in Nuxt, you should use the provided composables and utilities: `useError`, `clearError`, `createError`, and `showError`. These tools allow you to programmatically manage errors that occur during server-side or universal rendering.

010

Mastering Nuxt @masteringnuxt.com · 12/08/2025

Did you know that with Nuxt, a simple custom error page can be created using a root-level `error.vue` file? This file can use the default layout and display a basic error message. 🙌

020

Mastering Nuxt @masteringnuxt.com · 11/08/2025

💡 Tip of the day: If you need the raw string value of the request body in Nuxt, use the `readRawBody` method from `h3`. Specify the encoding (like 'utf-8') to get the body as a string.

040

Mastering Nuxt @masteringnuxt.com · 10/08/2025

💡 Tip of the day: The `abortNavigation` method in Nuxt has three use cases: 1. `abortNavigation()` 👉 basic error page 2. `abortNavigation('oops')` 👉 set a custom error message 3. `abortNavigation(errorObject)` 👉 error object from createError nuxt.com/docs/api/utils/abort-navig…

020

Mastering Nuxt @masteringnuxt.com · 09/08/2025

Did you know that with Nuxt, you can easily parse the body of an incoming request into a JavaScript object using the `readBody` method from `h3`? 🤓 This method is auto-imported in Nuxt server routes, making it simple to access parsed data.

030

Mastering Nuxt @masteringnuxt.com · 08/08/2025

💡 Tip of the day: Server routes in Nuxt support async handlers, so you can use `async/await` or return a `Promise`. You can also return a `Buffer`, a stream, or a standardized `Response` object for more advanced use cases. Have a great Friday, everyone!

020

Mastering Nuxt @masteringnuxt.com · 06/08/2025

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. 😏

120

Mastering Nuxt @masteringnuxt.com · 05/08/2025

💡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`:

030