Top 10 Nuxt.js Secrets to Boost Your App's Performance
Tags: vue, nuxt, frontend, webdev
Published: 2023-07-06 13:38:36

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 ☕](https://www.buymeacoffee.com/hakimovDev) 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. 😉