Nuxt Tips Collection

Hey there!

Recently, Michael Thiessen asked me for help reviewing his new ebook including Nuxt Tips Collection and I feel honored to accept this request - thank you Michael for thinking about me for this new creation! :)

In this article, I would like to introduce you to this amazing collection of tips and tricks that you can start using today in both work and hobby projects. I highly recommend to try it out and see how many things you still don't know about Nuxt and Vue ?

If you use the following link, I will get some commision from the affiliate program by Michael so thank you very much ?

Also, don't forget to use JAKUBTIPS discount code for the 20% OFF! ?

Enjoy!

? Few of my favourite Nuxt Tips

Below, I am listing few of my favourite tips that I liked the most. For the rest, check out the full tips collection by Michael :)

callOnce

If you need to run a piece of code only once, there’s a Nuxt composable for that (since 3.9):

await callOnce(async () => {
  // This will only be run one time, even with SSR
});

Using callOnce ensures that your code is only executed one time — either on the server during SSR or on the client when the user navigates to a new page.

It’s only executed one time per route load. It does not return any value, and can be executed anywhere you can place a composable.

It also has a key similar to useFetch or useAsyncData, to make sure that it can keep track of what’s been executed and what hasn’t:

['one', 'two', 'three'].forEach(item => {
  // Run once for each item
  callOnce(item, async () => {
    // Do something with the item
  });
});

By default Nuxt will use the file and line number to automatically generate a unique key, but this won’t work in all cases.

Default Slot on NuxtPage

The default slot on the NuxtPage component is passed all the route props, so we can have more control if we need it:

<nuxtpage v-slot="{ Component }">
  <!-- Add in our own keep-alive component -->
  <keep-alive>
    <component :is="Component"></component>
  </keep-alive>
</nuxtpage>

We can use it just like we’d use the RouterView component from Vue Router (say that five times fast!).

NuxtClientFallback Component

If you have an error during your server-side render, you can use the component to render some fallback content:

<template>
  <nuxtclientfallback>
    <servercomponentwitherror></servercomponentwitherror>

    <template>
      <p>Whoops, didn't render properly!</p>
    </template>
  </nuxtclientfallback>
</template>

This is still experimental though, so you must have experimental.clientFallback set to true for this to work. Make sure to check out the docs for the latest info.

Query Params in Server Routes

Getting values out of the query parameter in our server routes is straightforward:

import { getQuery } from 'h3';

export default defineEventHandler((event) => {
  const params = getQuery(event);
});

If we have the query ?hello=world&flavours[]=chocolate&flavours[]=vanilla we’ll get back the following params object:

{
  hello: 'world',
  flavours: [
    'chocolate',
    'vanilla',
  },
}

We can also use a validator function with getValidatedQuery:

import { getValidatedQuery } from 'h3';

export default defineEventHandler((event) => {
  const params = getValidatedQuery(
    event,
    obj => Array.isArray(obj.flavours)
  );
});

Dedupe Fetches

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

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

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/search/', {
  query: {
    search,
  },
  dedupe: 'defer'  // Keep the pending request and don't initiate a new one
});

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

? Learn more

Check out the full Nuxt Tips Collection by using the following link, I will get some commision from the affiliate program by Michael so thank you very much ?

Also, don't forget to use JAKUBTIPS discount code for the 20% OFF! ?

✅ Summary

Well done! You have just learned about the amazing Nuxt knowledge source by Michael!

Take care and see you next time!

And happy coding as always ?️

The above is the detailed content of Nuxt Tips Collection. For more information, please follow other related articles on the PHP Chinese website!