# Source: https://nuxt.com/raw/blog/v3-11.md

# Nuxt 3.11

> Nuxt 3.11 is out - with better logging, preview mode, server pages and much more!

This is possibly the last minor release before Nuxt v4, and so we've packed it full of features and improvements we hope will delight you! ✨

## 🪵 Better logging

When developing a Nuxt application and using `console.log` in your application, you may have noticed that these logs are not displayed in your browser console when refreshing the page (during server-side rendering). This can be frustrating, as it makes it difficult to debug your application. This is now a thing of the past!

Now, when you have server logs associated with a request, they will be bundled up and passed to the client and displayed in your browser console. [Asynchronous context](https://nodejs.org/docs/latest-v20.x/api/async_context.html) is used to track and associate these logs with the request that triggered them. ([#25936](https://github.com/nuxt/nuxt/pull/25936)).

For example, this code:

```vue [pages/index.vue]
<script setup>
console.log('Log from index page')

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

will now log to your browser console when you refresh the page:

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

👉 We also plan to support streaming of subsequent logs to the Nuxt DevTools in future.

We've also added a `dev:ssr-logs` hook (both in Nuxt and Nitro) which is called on server and client, allowing you to handle them yourself if you want to.

If you encounter any issues with this, it is possible to disable them - or prevent them from logging to your browser console.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  features: {
    devLogs: false
    // or 'silent' to allow you to handle yourself with `dev:ssr-logs` hook
  },
})
```

## 🎨 Preview mode

A new `usePreviewMode` composable aims to make it simple to use preview mode in your Nuxt app.

```ts [plugins/test.client.ts]
const { enabled, state } = usePreviewMode()
```

When preview mode is enabled, all your data fetching composables, like `useAsyncData` and `useFetch` will rerun, meaning any cached data in the payload will be bypassed.

<read-more to="/docs/api/composables/use-preview-mode">



</read-more>

## 💰 Cache-busting payloads

We now automatically cache-bust your payloads if you haven't disabled Nuxt's app manifest, meaning you shouldn't be stuck with outdated data after a deployment ([#26068](https://github.com/nuxt/nuxt/pull/26068)).

## 👮‍♂️ Middleware `routeRules`

It's now possible to define middleware for page paths within the Vue app part of your application (that is, not your Nitro routes) ([#25841](https://github.com/nuxt/nuxt/pull/25841)).

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  routeRules: {
    '/admin/**': {
      // or appMiddleware: 'auth'
      appMiddleware: ['auth']
    },
    '/admin/login': {
      // You can 'turn off' middleware that would otherwise run for a page
      appMiddleware: {
        auth: false
      }
    },
  },
})
```

<read-more to="/docs/guide/concepts/rendering#route-rules">



</read-more>

## ⌫ New `clear` data fetching utility

Now, `useAsyncData` and `useFetch` expose a `clear` utility. This is a function that can be used to set `data` to undefined, set `error` to `null`, set `pending` to `false`, set `status` to `idle`, and mark any currently pending requests as cancelled. ([#26259](https://github.com/nuxt/nuxt/pull/26259))

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

const route = useRoute()
watch(() => route.path, (path) => {
  if (path === '/') clear()
})
</script>
```

<read-more to="/docs/getting-started/data-fetching">



</read-more>

## 🕳️ New `#teleports` target

Nuxt now includes a new `<div id="teleports"></div>` element in your app within your `<body>` tag. It supports server-side teleports, meaning you can do this safely on the server:

```vue [app.vue]
<template>
  <Teleport to="#teleports">
    <span>
      Something
    </span>
  </Teleport>
</template>
```

## 🚦 Loading indicator and transition controls

It's now possible to set custom timings for hiding the loading indicator, and forcing the `finish()` method if needed ([#25932](https://github.com/nuxt/nuxt/pull/25932)).

There's also a new `page:view-transition:start` hook for hooking into the View Transitions API ([#26045](https://github.com/nuxt/nuxt/pull/26045)) if you have that feature enabled.

## 🛍️ Server- and client-only pages

This release sees server- and client-only pages land in Nuxt! You can now add a `.server.vue` or `.client.vue` suffix to a page to get automatic handling of it.

**Client-only pages** will render entirely on the client-side, and skip server-rendering entirely, just as if the entire page was wrapped in `<ClientOnly>`. Use this responsibly. The flash of load on the client-side can be a bad user experience so make sure you really need to avoid server-side loading. Also consider using `<ClientOnly>` with a `fallback` slot to render a skeleton loader ([#25037](https://github.com/nuxt/nuxt/pull/25037)).

⚗️ **Server-only pages** are even more useful because they enable you to integrate fully-server rendered HTML within client-side navigation. They will even be prefetched when links to them are in the viewport - so you will get instantaneous loading ([#24954](https://github.com/nuxt/nuxt/pull/24954)).

## 🤠 Server component bonanza

When you are using server components, you can now use the `nuxt-client` attribute anywhere within your tree ([#25479](https://github.com/nuxt/nuxt/pull/25479)).

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: 'deep'
    }
  },
})
```

You can listen to an `@error` event from server components that will be triggered if there is any issue loading the component ([#25798](https://github.com/nuxt/nuxt/pull/25798)).

Finally, server-only components are now smartly enabled when you have a server-only component or a server-only page within your project or any of its layers ([#26223](https://github.com/nuxt/nuxt/pull/26223)).

<callout type="warning">

Server components remain experimental and their API may change, so be careful
before depending on implementation details.

</callout>

## 🔥 Performance improvements

We've shipped a number of performance improvements, including only updating changed virtual templates ([#26250](https://github.com/nuxt/nuxt/pull/26250)), using a 'layered' prerender cache ([#26104](https://github.com/nuxt/nuxt/pull/26104)) that falls back to filesystem instead of keeping everything in memory when prerendering - and lots of other examples.

## 📂 Public assets handling

We have shipped a reimplementation of Vite's public asset handling, meaning that public assets in your `public/` directory or your layer directories are now resolved entirely by Nuxt ([#26163](https://github.com/nuxt/nuxt/pull/26163)), so if you have added `nitro.publicAssets` directories with a custom prefix, these will now work.

## 📦 Chunk naming

We have changed the default `_nuxt/[name].[hash].js` file name pattern for your JS chunks. Now, we default to `_nuxt/[hash].js`. This is to avoid false positives by ad blockers triggering off your component or chunk names, which can be a very difficult issue to debug. ([#26203](https://github.com/nuxt/nuxt/pull/26203))

You can easily configure this to revert to previous behaviour if you wish:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  vite: {
    $client: {
      build: {
        rollupOptions: {
          output: {
            chunkFileNames: '_nuxt/[name].[hash].js',
            entryFileNames: '_nuxt/[name].[hash].js'
          }
        }
      }
    }
  },
})
```

## 💪 Type fixes

Previously users with `shamefully-hoist=false` may have encountered issues with types not being resolved or working correctly. You may also have encountered problems with excessive type instantiation.

We now try to tell TypeScript about certain key types so they can be resolved even if deeply nested ([#26158](https://github.com/nuxt/nuxt/pull/26158)).

There are a whole raft of other type fixes, including some regarding import types ([#26218](https://github.com/nuxt/nuxt/pull/26218) and [#25965](https://github.com/nuxt/nuxt/pull/25965)) and module typings ([#25548](https://github.com/nuxt/nuxt/pull/25548)).

## ✅ Upgrading

As usual, our recommendation for upgrading Nuxt is to run:

```bash
nuxi upgrade --force
```

This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.

## 👉 Full release notes

<read-more to="https://github.com/nuxt/nuxt/releases/tag/v3.11.0" icon="i-simple-icons-github" target="_blank">

Read the full release notes of Nuxt `v3.11.0`.

</read-more>

Thank you for reading this far! We hope you enjoy the new release. Please do let us know if you have any feedback or issues.

**Happy Nuxting ✨**