Release of Nuxt 3.8

Nuxt 3.8 was released on October 16, 2023. It is a major update that includes a number of new features and improvements.

In addition to these new features and improvements, Nuxt 3.8 also includes a number of bug fixes and other minor changes.

In this blog post, we will outline some of the main additions and features captured in this new release

1. Built-in Nuxt Devtools

Nuxt Devtools provides a comprehensive suite of essential utilities for Nuxt developers, enabling them to gain insights into and effectively troubleshoot their Nuxt applications.

In previous Nuxt versions, obtaining Nuxt Devtools required a manual installation of the module. However, as of Nuxt 3.8, it comes pre-installed, ensuring a swift and hassle-free start for bug fixing and app diagnosis with Nuxt Devtools.

2. Auto Install Nuxt Image in seconds

nuxt-image (1).png

Nuxt Image simplifies image optimization for Nuxt apps with easy plug-and-play functionality. Resize and transform your images effortlessly using the built-in optimizer or integrate seamlessly with your preferred images CDN.

In this release, Nuxt Image is seamlessly detected and prompts installation when you employ the <NuxtImg> and <NuxtPicture> first-class built-in components, streamlining the process for enhanced image management.

3. Deeper Layouts scanning

In the latest update, Nuxt 3.8 introduces an enhanced feature that extends support for scanning layouts within subfolders located in ~/layouts, mirroring the convenience previously available for ~/components. This means that the framework now effortlessly accommodates a more organized structure for your layouts, making it easier to manage and structure your application's views.


// ~/layouts/base/default.vue
definePageMeta({
  layout: 'base-default',
})

// ~/layouts/base-default/base.vue
definePageMeta({
  layout: 'base-default',
})

4. Uses Nitro 2.7

Nuxt 3.8 also utilizes Nitro v2.7 which comes with lots of improvements and bug fixes. One of the core improvements is its 40% reduction in bundle size which improves production performance. You can take a look at the full changes in the full release note

5. Customize your <NuxtLink> Component

You can define your own <NuxtLink> components with the defineNuxtLink utility directly in your nuxt.config.

This can enable you to enforce trailing slash behavior across your entire site, for example:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        activeClass: 'nuxt-link-active',
        trailingSlash: 'append'
      }
    }
  }
})

Upgrading

Upgrading to Nuxt 3 is a straightforward process. To initiate the upgrade, all you need to do is execute the following command:

npx nuxi upgrade

Conclusion

These are some of the noticeable changes and improvements to Nuxt in version 3.8. There are many more fixes and improvements mentioned so definitely take a look at the official release blog from NuxtLabs for more information and details.

This introduces a new learning curve to mastering nuxt so if you are new to Nuxt or if you are looking to level up your Vue.js and Nuxt skills then the MasteringNuxt course is the best course for you. Get a comprehensive education on everything Nuxt as you build a real world Nuxt 3 application.

Be sure not to overlook the insightful recap of Daniel Roe's presentation at the Nuxt Nation Conference. He delved into comprehensive details regarding the remarkable accomplishments of the Nuxt team thus far, shedding light on both current achievements and exciting future plans for the framework.

A New Nuxt - Presentation by Daniel Roe

Nuxt just keeps getting better thanks to the Nuxt labs team and amazing community