Mastering Nuxt
@masteringnuxt.com
Learn how to develop and deploy fast, production-ready Nuxt apps.
Courses developed in collaboration with @nuxt.com
Powered by @bitterbrains.com
Courses developed in collaboration with @nuxt.com
Powered by @bitterbrains.com
Pinned
Mastering Nuxt
@masteringnuxt.com
· Mar 27
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.
masteringnuxt.com
Missed our Early Bird offer? You can still save 30% with our limited-time launch offer! 🎉
This isn’t just "another" course. It’s your hands-on guide to mastering full-stack Nuxt dev by building a production-ready AI chat app from scratch.
Get it now 👇
This isn’t just "another" course. It’s your hands-on guide to mastering full-stack Nuxt dev by building a production-ready AI chat app from scratch.
Get it now 👇
Reposted by Mastering Nuxt
Forget the hardware upgrades - this Black Friday, upgrade you!💪
The Black Friday Early Bird Deal is LIVE: up to 60% OFF @vuejs.org, @nuxt.com, React, Angular, & JavaScript Certification + get bonus items with Mid or Senior Certification🎁
Don’t miss our biggest deal ever👇
go.certificates.dev/eb25X
The Black Friday Early Bird Deal is LIVE: up to 60% OFF @vuejs.org, @nuxt.com, React, Angular, & JavaScript Certification + get bonus items with Mid or Senior Certification🎁
Don’t miss our biggest deal ever👇
go.certificates.dev/eb25X
Certification of Competency for Modern Developers
Get Certified! Have your developer skills validated and stand out in the crowd for promotions and new positions.
go.certificates.dev
November 11, 2025 at 4:19 PM
Forget the hardware upgrades - this Black Friday, upgrade you!💪
The Black Friday Early Bird Deal is LIVE: up to 60% OFF @vuejs.org, @nuxt.com, React, Angular, & JavaScript Certification + get bonus items with Mid or Senior Certification🎁
Don’t miss our biggest deal ever👇
go.certificates.dev/eb25X
The Black Friday Early Bird Deal is LIVE: up to 60% OFF @vuejs.org, @nuxt.com, React, Angular, & JavaScript Certification + get bonus items with Mid or Senior Certification🎁
Don’t miss our biggest deal ever👇
go.certificates.dev/eb25X
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.
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.
November 6, 2025 at 2:32 PM
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.
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.
Tired of passing props through a maze of components? 🌀
Learn how `useState` keeps your app reactive, SSR-ready, and perfectly simple - no complex setup, no data leaks, just clean global state that works.
https://masteringnuxt.com/blog/understanding-usestate-in-nuxt-the-simple-way-to-share-state
Learn how `useState` keeps your app reactive, SSR-ready, and perfectly simple - no complex setup, no data leaks, just clean global state that works.
https://masteringnuxt.com/blog/understanding-usestate-in-nuxt-the-simple-way-to-share-state
Understanding useState in Nuxt: The Simple Way to Share State
Need a simple shared state management solution for your Nuxt app? In this article, explore `useState` : Nuxt’s built-in composable for shared reactive data that works seamlessly with SSR.
masteringnuxt.com
November 3, 2025 at 2:32 PM
Tired of passing props through a maze of components? 🌀
Learn how `useState` keeps your app reactive, SSR-ready, and perfectly simple - no complex setup, no data leaks, just clean global state that works.
https://masteringnuxt.com/blog/understanding-usestate-in-nuxt-the-simple-way-to-share-state
Learn how `useState` keeps your app reactive, SSR-ready, and perfectly simple - no complex setup, no data leaks, just clean global state that works.
https://masteringnuxt.com/blog/understanding-usestate-in-nuxt-the-simple-way-to-share-state
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.
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.
October 14, 2025 at 2:26 PM
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.
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.
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.
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.
October 8, 2025 at 2:41 PM
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.
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.
💡 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.
This allows you to inspect all the data and state transferred during SSR or hydration.
October 2, 2025 at 2:32 PM
💡 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.
This allows you to inspect all the data and state transferred during SSR or hydration.
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.
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.
September 29, 2025 at 10:27 AM
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.
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.
🔥 ViteConf 2025 is almost here! 🔥
Join Evan You, Daniel Roe, Anthony Fu, and more for two days of deep Vite talks, workshops, and the latest in web tech.
See how Vite is powering Nuxt and shaping the future of web development.
🎟️ Info & Tickets here: https://viteconf.amsterdam/
Join Evan You, Daniel Roe, Anthony Fu, and more for two days of deep Vite talks, workshops, and the latest in web tech.
See how Vite is powering Nuxt and shaping the future of web development.
🎟️ Info & Tickets here: https://viteconf.amsterdam/
ViteConf
The Official in-person Vite Conference organised in collaboration with the Creator of Vite, Evan You and Vite Core Team!
viteconf.amsterdam
September 25, 2025 at 2:32 PM
🔥 ViteConf 2025 is almost here! 🔥
Join Evan You, Daniel Roe, Anthony Fu, and more for two days of deep Vite talks, workshops, and the latest in web tech.
See how Vite is powering Nuxt and shaping the future of web development.
🎟️ Info & Tickets here: https://viteconf.amsterdam/
Join Evan You, Daniel Roe, Anthony Fu, and more for two days of deep Vite talks, workshops, and the latest in web tech.
See how Vite is powering Nuxt and shaping the future of web development.
🎟️ Info & Tickets here: https://viteconf.amsterdam/
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 👇
For example, you can name your test file like this 👇
September 23, 2025 at 10:27 AM
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 👇
For example, you can name your test file like this 👇
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.
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.
September 17, 2025 at 2:32 PM
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.
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.
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.
To do this, wrap your component with a `<DevOnly>` tag in your layout file. This component will be excluded from your production build.
September 7, 2025 at 2:33 PM
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.
To do this, wrap your component with a `<DevOnly>` tag in your layout file. This component will be excluded from your production build.
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:
This lets you manipulate the DOM or add event listeners using only vanilla JavaScript:
September 6, 2025 at 2:33 PM
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:
This lets you manipulate the DOM or add event listeners using only vanilla JavaScript:
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.
September 5, 2025 at 2:35 PM
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.
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):
We can do that with useRequestHeaders (or useRequestHeader):
September 4, 2025 at 2:33 PM
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):
We can do that with useRequestHeaders (or useRequestHeader):
💡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.
September 3, 2025 at 2:33 PM
💡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.
💡 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:
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:
September 2, 2025 at 2:33 PM
💡 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:
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:
When do we use `NuxtErrorBoundary` in Nuxt? 🤔
We should wrap it around distinct chunks of functionality where you can handle a group of potential errors together:
- `NuxtPage` components that represent nested routes
- Widgets on a dashboard
- Modals
We should wrap it around distinct chunks of functionality where you can handle a group of potential errors together:
- `NuxtPage` components that represent nested routes
- Widgets on a dashboard
- Modals
September 1, 2025 at 2:33 PM
When do we use `NuxtErrorBoundary` in Nuxt? 🤔
We should wrap it around distinct chunks of functionality where you can handle a group of potential errors together:
- `NuxtPage` components that represent nested routes
- Widgets on a dashboard
- Modals
We should wrap it around distinct chunks of functionality where you can handle a group of potential errors together:
- `NuxtPage` components that represent nested routes
- Widgets on a dashboard
- Modals
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.
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.
August 31, 2025 at 2:33 PM
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.
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.
Learn how the NuxtErrorBoundary component in Nuxt 3 works under the hood to gracefully handle client-side errors. This deep dive explores its powerful features, source code, and practical use cases. 💻
By Michael Thiessen.
https://masteringnuxt.com/blog/how-nuxterrorboundary-works
By Michael Thiessen.
https://masteringnuxt.com/blog/how-nuxterrorboundary-works
How NuxtErrorBoundary Works
Learn how the NuxtErrorBoundary component in Nuxt 3 works under the hood to gracefully handle client-side errors. This deep dive explores its powerful features, source code, and practical use cases to help you write more resilient Vue apps.
masteringnuxt.com
August 30, 2025 at 2:33 PM
Learn how the NuxtErrorBoundary component in Nuxt 3 works under the hood to gracefully handle client-side errors. This deep dive explores its powerful features, source code, and practical use cases. 💻
By Michael Thiessen.
https://masteringnuxt.com/blog/how-nuxterrorboundary-works
By Michael Thiessen.
https://masteringnuxt.com/blog/how-nuxterrorboundary-works
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.
You can specify this class using the `prefetched-class` prop, which helps you visually identify prefetched links during development.
August 30, 2025 at 9:12 AM
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.
You can specify this class using the `prefetched-class` prop, which helps you visually identify prefetched links during development.
💡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.
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.
August 29, 2025 at 2:33 PM
💡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.
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.
💡 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.
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.
August 28, 2025 at 2:33 PM
💡 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.
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.
How do you handle user roles and permissions in your Nuxt apps? Any best practices to share?
August 28, 2025 at 8:27 AM
How do you handle user roles and permissions in your Nuxt apps? Any best practices to share?
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.
This is useful for testing route-specific content or behavior in your Nuxt application.
August 27, 2025 at 2:33 PM
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.
This is useful for testing route-specific content or behavior in your Nuxt application.