通过 100 多个技巧的集合学习 Nuxt!
发布·  

Nuxt 3.11

Nuxt 3.11 发布 - 具有更好的日志记录、预览模式、服务器页面以及更多功能!

这可能是 Nuxt v4 之前的最后一个小版本,因此我们 packed 它充满了我们希望您会喜欢的功能和改进!✨

🪵 更好的日志记录

在开发 Nuxt 应用程序并在应用程序中使用 console.log 时,您可能已经注意到,当刷新页面时(在服务器端渲染期间),这些日志不会显示在浏览器控制台中。这可能会令人沮丧,因为它使调试应用程序变得困难。现在这种情况已成为过去!

现在,当您有与请求关联的服务器日志时,它们将被捆绑并传递到客户端,并显示在您的浏览器控制台中。异步上下文 用于跟踪这些日志并将它们与触发它们的请求关联起来。(#25936)。

例如,以下代码

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>

现在将在您刷新页面时记录到您的浏览器控制台

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

👉 我们还计划在未来支持将后续日志流式传输到 Nuxt DevTools 中。

我们还添加了一个 dev:ssr-logs 钩子(在 Nuxt 和 Nitro 中),它在服务器和客户端上都被调用,如果您愿意,您可以自己处理它们。

如果您遇到任何问题,可以禁用它们 - 或阻止它们记录到您的浏览器控制台。

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

🎨 预览模式

一个新的 usePreviewMode 组合式函数旨在简化在您的 Nuxt 应用程序中使用预览模式。

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

当启用预览模式时,所有数据获取组合式函数,如 useAsyncDatauseFetch 将重新运行,这意味着有效负载中的任何缓存数据都将被绕过。

文档 > API > 组合式函数 > 使用预览模式 中阅读更多内容。

💰 缓存清除有效负载

如果您没有禁用 Nuxt 的应用程序清单,我们现在会自动缓存清除您的有效负载,这意味着您在部署后不应再被过时的数据困扰(#26068)。

👮‍♂️ 中间件 routeRules

现在可以在应用程序的 Vue 应用程序部分(即,不是您的 Nitro 路由)中为页面路径定义中间件(#25841)。

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
      }
    },
  },
})
文档 > 指南 > 概念 > 渲染#路由规则 中阅读更多内容。

⌫ 新的 clear 数据获取实用程序

现在,useAsyncDatauseFetch 公开了一个 clear 实用程序。这是一个函数,可以用于将 data 设置为 undefined,将 error 设置为 null,将 pending 设置为 false,将 status 设置为 idle,并将任何当前挂起的请求标记为已取消。(#26259

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

const route = useRoute()
watch(() => route.path, (path) => {
  if (path === '/') clear()
})
</script>
文档 > 入门 > 数据获取 中阅读更多内容。

🕳️ 新的 #teleports 目标

Nuxt 现在在应用程序的 <body> 标签中包含一个新的 <div id="teleports"></div> 元素。它支持服务器端 teleport,这意味着您可以在服务器上安全地执行此操作

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

🚦 加载指示器和过渡控制

现在可以为隐藏加载指示器设置自定义计时,并在需要时强制执行 finish() 方法(#25932)。

还有一个新的 page:view-transition:start 钩子,用于挂钩到 View Transitions API(#26045),如果您启用了该功能。

🛍️ 仅服务器和仅客户端页面

此版本看到了仅服务器和仅客户端页面在 Nuxt 中的落地!您现在可以向页面添加 .server.vue.client.vue 后缀,以自动处理它。

仅客户端页面 将完全在客户端呈现,并完全跳过服务器端渲染,就像整个页面都包裹在 <ClientOnly> 中一样。请负责任地使用它。客户端加载时的闪烁可能会带来糟糕的用户体验,因此请确保您真的需要避免服务器端加载。还可以考虑将 <ClientOnly>fallback 插槽一起使用以渲染骨架加载器(#25037)。

⚗️ 仅服务器页面 甚至更有用,因为它们使您能够在客户端导航中集成完全服务器渲染的 HTML。当链接到它们的链接在视口中时,它们甚至会被预取 - 因此您将获得即时加载(#24954)。

🤠 服务器组件盛宴

当您使用服务器组件时,您现在可以在树中的任何位置使用 nuxt-client 属性(#25479)。

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

您可以从服务器组件监听 @error 事件,如果在加载组件时出现任何问题,将触发该事件(#25798)。

最后,当您的项目或其任何层中具有仅服务器组件或仅服务器页面时,现在可以智能地启用仅服务器组件(#26223)。

服务器组件仍然是实验性的,它们的 API 可能会更改,因此在依赖实现细节之前要小心。

🔥 性能改进

我们发布了许多性能改进,包括仅更新更改的虚拟模板(#26250),使用“分层”预渲染缓存(#26104),该缓存回退到文件系统而不是在预渲染时将所有内容都保存在内存中 - 以及许多其他示例。

📂 公共资源处理

我们已经发布了 Vite 公共资源处理的重新实现,这意味着 public/ 目录或您的层目录中的公共资源现在完全由 Nuxt 解析(#26163),因此,如果您添加了带有自定义前缀的 nitro.publicAssets 目录,这些目录现在将可以工作。

📦 代码块命名

我们已经更改了 JS 代码块的默认 _nuxt/[name].[hash].js 文件名模式。现在,我们默认为 _nuxt/[hash].js。这是为了避免广告拦截器错误地触发您的组件或代码块名称,这可能是一个非常难以调试的问题。(#26203

如果您愿意,您可以轻松配置此项以恢复到以前的行为

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

💪 类型修复

以前,使用 shamefully-hoist=false 的用户可能遇到类型未解析或无法正常工作的问题。您可能还遇到过类型实例化过多的问题。

我们现在尝试告知 TypeScript 关于某些关键类型,以便即使在深层嵌套的情况下也可以解析它们(#26158)。

还有大量其他类型修复,包括一些关于导入类型的修复(#26218#25965)和模块类型定义(#25548)。

✅ 升级

与往常一样,我们升级 Nuxt 的建议是运行

nuxi upgrade --force

这也将刷新您的 lockfile,并确保您从 Nuxt 依赖的其他依赖项(尤其是在 unjs 生态系统中)中拉取更新。

👉 完整发布说明

阅读 Nuxt v3.11.0 的完整发布说明。

感谢您阅读至此!我们希望您喜欢新版本。如果您有任何反馈或问题,请务必告知我们。

Nuxting 愉快 ✨