diff --git a/content/0.index.yml b/content/0.index.yml index 79c379d5e..5e7ded830 100644 --- a/content/0.index.yml +++ b/content/0.index.yml @@ -1,8 +1,8 @@ navigation: false hero: cta: - label: Nuxt v3.10 is out - to: /blog/v3-10 + label: Nuxt v3.11 is out + to: /blog/v3-11 variant: outline icon: i-ph-arrow-right size: xs diff --git a/content/7.blog/22.v3-11.md b/content/7.blog/22.v3-11.md new file mode 100644 index 000000000..1c61d56ec --- /dev/null +++ b/content/7.blog/22.v3-11.md @@ -0,0 +1,232 @@ +--- +title: Nuxt 3.11 +description: Nuxt 3.11 is out - with better logging, preview mode, server pages and much more! +navigation: false +image: /assets/blog/v3.11.png +authors: + - name: Daniel Roe + avatarUrl: https://github.com/danielroe.png + link: https://twitter.com/danielcroe + twitter: danielcroe +date: 2024-03-16T10:00:00.000Z +category: Release +--- + +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] + +``` + +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"} +:: + +### 💰 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"} +:: + +## ⌫ 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 + +``` + +::read-more{to="/docs/getting-started/data-fetching"} +:: + +### 🕳️ New `#teleports` target + +Nuxt now includes a new `
` element in your app within your `` tag. It supports server-side teleports, meaning you can do this safely on the server: + +```vue [app.vue] + +``` + +### 🚦 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 ``. 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 `` 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. +:: + +### 🔥 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].js', + entryFileNames: '_nuxt/[name].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 +--- +color: gray +icon: i-simple-icons-github +target: _blank +to: https://github.com/nuxt/nuxt/releases/tag/v3.11.0 +--- +Read the full release notes of Nuxt `v3.11.0`. +:: + +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 ✨** diff --git a/public/assets/blog/v3.11.png b/public/assets/blog/v3.11.png new file mode 100644 index 000000000..47d19ffa0 Binary files /dev/null and b/public/assets/blog/v3.11.png differ