5 Awesome Nuxt 3 tips

1. Lazy Loaded Components

Not all your components need to be loaded immediately.

With Nuxt we can defer loading by adding Lazy as a prefix.

Nuxt does all the heavy-lifting for us!

<!-- Loads as soon as possible -->
<Modal v-if="showModal" />

<!-- Only loads when showModal = true -->
<LazyModal v-if="showModal" />

2. Auto-imports

By taking advantage of auto-imports, we can quickly access the route and user information without needing to manually import them.

This helps make our code more organized, efficient, and readable.

<script setup>
// We can use the imported route and user without having to import it ourselves
const { path, params } = useRoute();
const userData = useCustomComposable();
</script>

3. Handle client-side errors with ease

Using NuxtErrorBoundary components around distinct chunks of functionality in your app allows you to handle a group of errors together, providing better UX.

This lets you contain errors in your app and handle them in specific ways instead of using a generic error page.

<NuxtErrorBoundary>
  <NuxtPage />
  <template #error="{ error }">
    <div>
      <p>
        Oh no, something broke when loading the lesson!
        <code>{{ error }}</code>
      </p>
      <p>
        <button
          class="hover:cursor-pointer"
          @click="clearError(error)"
        >
          Go to the first lesson
        </button>
      </p>
    </div>
  </template>
</NuxtErrorBoundary>

4. /assets vs. /public — how do you decide?

Nuxt 3 offers two options for managing assets in your web app:

• ~/assets folder
• ~/public folder

Choose assets folder if the assets need processing, change often, and don’t require a specific filename.

Otherwise, use the public directory.

// Using ~/assets
<script setup>
import image from '~/assets/image.png';
</script>
<template>
  <img :src="image" />
</template>

// Using ~/public
<template>
  <img src="/image.png" />
</template>

5. Customizing Your Own NuxtLink

You can also encapsulate a lot of these different configurations into your own link components if you want, using defineNuxtLink:

// ~/components/MyLink.ts

// Only colour prefetched links during development
export default defineNuxtLink({
    componentName: 'MyLink',
  prefetchedClass: process.env.NODE_ENV === 'development'
        ? 'prefetched'
        : undefined,
});

Here we create our own MyLink component that will set a special class on prefetched links, but only during development.

You can do a lot more with defineNuxtLink:

defineNuxtLink({
  componentName?: string;
  externalRelAttribute?: string;
  activeClass?: string;
  exactActiveClass?: string;
  prefetchedClass?: string;
  trailingSlash?: 'append' | 'remove'
}) => Component

If you want to learn more, I recommend going straight to the docs, or to the source code itself.

Tips were sourced from this article on Mastering Nuxt. Head over to explore more of these time saving nuxt 3 tips.