Nuxt3.11 is Out!

Nuxt 3.11 has been released!

In this minor version, new features have been added before Nuxt 4. Let’s take a look at the new features that I’m keeping an eye on.

New feature in v3.11

1. Better logging

Nuxt 3.11 has improved the logging system.

Server-side logging and client-side logging are distinguished as follows.

<script setup lang="ts">
console.log('Log from index page')

const { data } = await useAsyncData(() => {
  console.log('Log inside useAsyncData')
  return $fetch('/api/test')
})

</script>

Log from index page
[ssr] Log inside useAsyncData 
    at pages/index.vue

2. Newest `clear` data fetching utility

Now, with the clear utility in useFetch and useAsyncData, you can cancel data requests in the necessary hooks.

<script setup lang="ts">
const { data, clear } = await useFetch('/api/test')

const route = useRoute()

watch(() => route.path, (path) => {
  if (path === '/') clear()
})

</script>

3. Can create server-side and client-side pages.

With this release, Nuxt allows you to create pages specifically for the server or client. You can create pages suited for each environment by using the .server.vue or .client.vue suffixes on your pages.

That’s all!

Other performance improvements and enhancements in handling public assets have been made.

Although there were no significant feature additions since this is the last minor release before Nuxt4, Main release of Nuxt4 is a highly anticipated update.

See you nuxt! (not next)

Reference

Nuxt3 Blog