Nuxt.js is a powerful framework for building Vue.js applications, providing a streamlined development experience and excellent performance. To work faster and optimize your Nuxt.js app, here are ten secrets that can help you boost its performance, along with code examples.

1. Enable Static Site Generation (SSG):

// nuxt.config.js
export default {
  target: 'static'
}

Enabling SSG improves your app's loading speed by pre-rendering pages and serving them as static files.

2. Code Splitting with Lazy Loading:

<!-- Component.vue -->
<template>
  <div>
    <button @click="loadComponent">Load Component</button>
    <div v-if="showComponent">
      <AsyncComponent />
    </div>
  </div>
</template>
<script>
import AsyncComponent from '@/components/AsyncComponent.vue';

export default {
  data() {
    return {
      showComponent: false
    };
  },
  methods: {
    async loadComponent() {
      const { default: AsyncComponent } = await import('@/components/AsyncComponent.vue');
      this.showComponent = true;
    }
  }
};
</script>

Utilize dynamic imports and lazy loading techniques in Nuxt.js to load components and routes only when necessary.

3. Optimize Images:

// nuxt.config.js
export default {
  buildModules: ['@nuxt/image']
}

Use Nuxt.js plugins like @nuxt/image to optimize and deliver images in the appropriate format, size, and quality based on the user's device.

4. Cache API Requests:

// store/index.js
export const actions = {
  async fetchUserData({ commit }) {
    const cachedUserData = this.$axios.$get('/api/user/cache');
    if (cachedUserData) {
      commit('SET_USER_DATA', cachedUserData);
    } else {
      const userData = await this.$axios.$get('/api/user');
      commit('SET_USER_DATA', userData);
    }
  }
};

Implement caching for API requests to minimize unnecessary network calls.

5. Use Server-Side Rendering (SSR):

// nuxt.config.js
export default {
  target: 'server'
}

SSR renders Vue components on the server, resulting in faster initial page loads and improved SEO.

6. Optimize CSS:

// nuxt.config.js
export default {
  build: {
    extractCSS: true
  }
}

Extract and optimize CSS to reduce file sizes and improve loading times.

7. Lazy Load Images:

<!-- Component.vue -->
<template>
  <div>
    <img v-lazy="imageSrc" alt="Lazy Loaded Image">
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageSrc: '/path/to/image.jpg'
    };
  }
};
</script>

Use the v-lazy directive to lazily load images as they become visible on the screen.

8. Use WebP Format for Images:

// nuxt.config.js
export default {
  image: {
    formats: {
      webp: {
        quality: 80
      }
    }
  }
}

Configure Nuxt.js to deliver images in the WebP formatto reduce file sizes and improve loading times.

9. Optimize Server-Side Rendering (SSR) Bundle Size:

// nuxt.config.js
export default {
  build: {
    terser: {
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    }
  }
}

Configure the build options to remove console logs and reduce the bundle size for SSR.

10. Preload and Prefetch Assets:

<!-- Component.vue -->
<template>
  <div>
    <link rel="preload" href="/path/to/asset.js" as="script">
    <link rel="prefetch" href="/path/to/asset.css" as="style">
  </div>
</template>

Preload critical assets using the <link> tag with the rel="preload" attribute, and prefetch non-critical assets using the rel="prefetch" attribute.

I hope you found this blog helpful. If you have any questions, please feel free to leave a comment below. 🤗

I can write a blog like that about any programming language or framework. What would you like me to blog about next time?
Send me a coffee ☕ with what you would like me to write about next time and I will definitely consider your suggestion and if I like your suggestion I will write about your suggestion in the next blog post. 😉