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
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.
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.
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:
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.
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.
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.
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:
For example, to add a custom folder for global components:
August 26, 2025 at 2:33 PM
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:
For example, to add a custom folder for global components:
💡 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.
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.
August 25, 2025 at 2:33 PM
💡 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.
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.
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.
This utility lets you sync data between server and client by using hooks and the Nuxt payload system.
August 24, 2025 at 2:33 PM
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.
This utility lets you sync data between server and client by using hooks and the Nuxt payload system.
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.
It provides reactive values like `progress` and `isLoading`, which can be logged or used in your UI.
August 23, 2025 at 2:33 PM
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.
It provides reactive values like `progress` and `isLoading`, which can be logged or used in your UI.
💡 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.
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.
August 22, 2025 at 2:33 PM
💡 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.
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.
💡 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:
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:
August 21, 2025 at 2:33 PM
💡 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:
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:
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. 👩💻
August 20, 2025 at 2:33 PM
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. 👩💻