🔥 (#157) Dedupe fetches easily

Hey!

Today is the last day to get the newly updated Reusable Components for 35% off.

You can get instant access to Reusable Components here.

Other than that, I hope you're having a lovely early spring!

Enjoy these tips.

— Michael

🔥 Dedupe fetches in Nuxt

Since 3.9 we can control how Nuxt deduplicates fetches with the dedupe parameter:

  useFetch('/api/menuItems', {  
      // Cancel the previous request and make a new request  
      dedupe: 'cancel'  
    });

The useFetch composable (and useAsyncData composable) will re-fetch data reactively as their parameters are updated. By default, they'll cancel the previous request and initiate a new one with the new parameters.

However, you can change this behaviour to instead defer to the existing request — while there is a pending request, no new requests will be made:

  useFetch('/api/menuItems', {  
      // Keep the pending request and don't initiate a new one  
      dedupe: 'defer'  
    });

This gives us greater control over how our data is loaded and requests are made.

🔥 Nuxt Layout Fallback

If you're dealing with a complex web app in Nuxt, you may want to change what the default layout is:

  <NuxtLayout fallback="differentDefault">  
      <NuxtPage />  
    </NuxtLayout>

Normally, the NuxtLayout component will use the default layout if no other layout is specified — either through definePageMeta, setPageLayout, or directly on the NuxtLayout component itself.

This is great for large apps where you can provide a different default layout for each part of your app.

🔥 Debug hydration errors in production Nuxt

Hydration errors are one of the trickiest parts about SSR — especially when they only happen in production.

Thankfully, Vue 3.4 lets us do this.

In Nuxt, all we need to do is update our config:

  export default defineNuxtConfig({  
      debug: true,  
      // rest of your config...  
    })

If you aren't using Nuxt, you can enable this using the new compile-time flag: __VUE_PROD_HYDRATION_MISMATCH_DETAILS__.

This is what Nuxt uses.

Enabling flags is different based on what build tool you're using, but if you're using Vite this is what it looks like in your vite.config.js file:

  import { defineConfig } from 'vite'  
      
    export default defineConfig({  
      define: {  
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'  
      }  
    })

Turning this on will increase your bundle size, but it's really useful for tracking down those pesky hydration errors.

📜 Server Routes in Nuxt 3

Server routes are a powerful feature of Nuxt 3 that allow you to create custom endpoints for your app.

In this article I look at the different types of server routes and how to use them.

Check it out here: Server Routes in Nuxt 3

💬 Brute force

"When in doubt, use brute force." — Steve McConnell

🧠 Spaced-repetition: Reactivity and Callbacks

The best way to commit something to long-term memory is to periodically review it, gradually increasing the time between reviews 👨‍🔬

Actually remembering these tips is much more useful than just a quick distraction, so here's a tip from a couple weeks ago to jog your memory.

Callback is a bit of a dirty word in Vue, but there are great use cases for them.

Consider a scenario where a parent component needs to react to changes in its children's state. You can use a reactive object provided by the parent and injected by the children to keep track of changes.

Here's an example:

  // Parent component  
    const sharedState = reactive({});  
    provide('sharedState', sharedState);  
      
    // Child component  
    const sharedState = inject('sharedState');

When a child component updates a property of sharedState, Vue's reactivity system ensures that any effects or computed properties that depend on sharedState are automatically re-evaluated.

You can use callbacks to allow child components to register themselves with the parent or to signal the parent to perform an action.

Here's how you might implement a callback with provide and inject:

  // Parent component  
    const registerChild = (child) => { /* ... */ };  
    provide('registerChild', registerChild);  
      
    // Child component  
    const registerChild = inject('registerChild');  
    registerChild(/* child details */);

This pattern is powerful for creating complex interactions between components while keeping the logic encapsulated and manageable.

It's especially useful in the Compound Components pattern.

p.s. I also have four products/courses: Clean Components Toolkit, Vue Tips Collection 2, Mastering Nuxt 3, and Reusable Components

搜索

聊搜 - 文章聚合搜索