Sign in

Mastering Nuxt

@masteringnuxt.com
336 followers 54 following 440 posts

Learn how to develop and deploy fast, production-ready Nuxt apps. Courses developed in collaboration with @nuxt.com Powered by @bitterbrains.com

PostsRepliesMedia
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 · 22/01/2026
💨 Nuxt 3 is fast by default. But the real gains come from how you use it. Hybrid rendering, lazy loading, smart caching, image optimization, and Core Web Vitals explained in one practical guide 👇 masteringnuxt.com/blog/performance-…
masteringnuxt.com
Performance Optimization in Nuxt 3
What makes Nuxt to be considered performant. This articles dives into Nuxt 3 performance optimization techniques and features for building lightning-fast web apps. Explore hybrid rendering, lazy loading, smart caching, image optimization, and Core Web Vitals improvements.
020
Reposted by Mastering Nuxt
Certificates.Dev @certificates.dev · 15/01/2026
JavaScript skills don’t grow by accident. They grow when they’re challenged. ⚡ Get 48 hours FREE access to our Mid-Level JavaScript study guide on Feb 7–8 & put your skills to the test. 💻18 Code Challenges 🧠42 Quizzes 📚17 Lessons 📝Trial Exam Sign up👇 go.certificates.dev/jsfwx
go.certificates.dev
Certificates.dev Free Weekend | Free access to JavaScript Developer Certification Training
Unlock 48 hours of free access to the Certified JavaScript Developer Training on Feb 7-8 2026 . Dive into theory, coding challenges, quizzes, and a trial exam.
043
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 · 19/12/2025
Building with @nuxt_js in 2026? Start strong before the year ends. End of Year Sale is now live - get can get access to the official Nuxt 4 course for less: ⚡️ Up to 33% off the Full Stack Unleashed Complete ⚡️ 59% off the Super Bundle Get yours today👇 masteringnuxt.com
masteringnuxt.com
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.
010
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 · 01/12/2025
Serious Nuxt apps need serious knowledge - now’s your chance to learn! 💻 Cyber Monday is your last shot to grab Mastering Nuxt Full Stack Unleashed, the official course for Nuxt, with full-stack projects, AI chat apps & more - up to 60% off 👇 vue.school/mnbf25x
vue.school
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.
020
Mastering Nuxt @masteringnuxt.com · 28/11/2025
Learn Nuxt 4 the official way this Black Friday!🚀 💣 40% off the Complete Bundle OR 💥Go all-in with the Super Bundle at 62% off Unlock 100+ lessons & everything Michael Thiessen & the Nuxt team helped build into the official course.👇 vue.school/mnbf25x
vue.school
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.
031
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 · 24/11/2025
Turns out Nuxt versions 3.0 to 3.17. had hidden gems all along. 💎 We’ve rounded up 26 hidden features, route groups, preview mode, delayed hydration, and more - with examples and tips for upgrading to Nuxt 4. Discover them here 👇 masteringnuxt.com/blog/26-nuxt-feat…
masteringnuxt.com
26 Nuxt Features You May Have Missed
Explore the most impactful features from Nuxt 3.0 to 3.17 you may have missed — with clear examples, explanations, and upgrade notes for Nuxt 4 users.
030
Mastering Nuxt @masteringnuxt.com · 21/11/2025
Mastering Nuxt Fullstack Unleashed is the official @nuxt.com 4 course! 🏆 Built with @michaelthiessen.bsky.social & the Nuxt team, it has 100+ lessons, a full AI chat app, real-world production patterns & more Master full-stack Nuxt dev today - up to 70% off 👇 vue.school/mnseb25x
vue.school
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.
000
Mastering Nuxt @masteringnuxt.com · 17/11/2025
You’re probably building your Nuxt app slower than you need to. Not because you're doing anything wrong… but because Nuxt hides a ton of shortcuts in plain sight. Here are 10 tricks that instantly speed up your workflow. 👇 masteringnuxt.com/blog/10-dev-trick…
masteringnuxt.com
10 Dev Tricks to Build Your Nuxt App Faster
Practical tips and tricks to speed up your Nuxt development workflow, from auto-imports to DevTools and beyond.
010
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
Reposted by Mastering Nuxt
Certificates.Dev @certificates.dev · 11/11/2025
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
go.certificates.dev
Certification of Competency for Modern Developers
Get Certified! Have your developer skills validated and stand out in the crowd for promotions and new positions.
052
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 · 03/11/2025
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. masteringnuxt.com/blog/understandin…
masteringnuxt.com
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.
030
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 · 25/09/2025
🔥 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: viteconf.amsterdam
viteconf.amsterdam
ViteConf
The Official in-person Vite Conference organised in collaboration with the Creator of Vite, Evan You and Vite Core Team!
040
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 `&lt;DevOnly&gt;` 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 · 01/09/2025
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
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
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. masteringnuxt.com/blog/how-nuxterro…
masteringnuxt.com
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.
030
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 · 28/08/2025
How do you handle user roles and permissions in your Nuxt apps? Any best practices to share?
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 · 26/08/2025
What’s your strategy for handling authentication in Nuxt? Do you use a module or roll your own? 🤔
000
Mastering Nuxt @masteringnuxt.com · 25/08/2025
💡 Tip of the day: Within Nuxt, the `useLoadingIndicator` composable is used by the `&lt;NuxtLoadingIndicator&gt;` 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