博客
Nuxt专区
Nuxt3 发布3.5版本 更新大量特色功能
返回列表

Nuxt3 发布3.5版本 更新大量特色功能

nuxt3更新vue3框架最新版本

⚡️ Vue 3.3 released!

  • Vue 3.3 已经发布，具有许多令人兴奋的特性，特别是在类型支持方面。 这也为在嵌套页面之间导航时的数据获取带来了显着改进 (#20777)，感谢 [@antfu](https://github .com/antfu) 和 @baiwusanyu-c。
    • 新的 defineOptions 宏
    • “通用”组件
    • 类型槽和在 defineProps 中使用外部类型
    • ... 和更多

阅读 完整发布公告 了解更多详情。

🙌 Nitropack v2.4

我们一直致力于对 Nitro 进行大量改进，这些改进已经在 Nitro v2.4 中实现——您可能已经有了这个升级，其中包含许多错误修复、Cloudflare 模块工作格式的更新、Vercel KV 支持和 更多的。

请注意：如果您正在部署到 Vercel 或 Netlify 并希望从增量静态再生中受益，您现在应该更新您的路由规则：

diff
routeRules: {
--  '/blog/**': { swr: 3000 },
++  '/blog/**': { isr: 3000 },
}

阅读 完整的发行说明。

💖 新的默认值

富 JSON 负载序列化 现在默认启用（#19205, [#20770](https://github.com/nuxt /nuxt/拉/20770））。 这既更快又允许序列化从 Nuxt 服务器传递到客户端的有效载荷中的复杂对象（以及在为预渲染站点提取有效载荷数据时）。

这意味着 开箱即用地支持各种丰富的 JS 类型：正则表达式、日期、Map 和 Set 以及 BigInt 以及 NuxtError - 以及 Vue 特定的对象，如 ref、reactive , shallowRef 和 shallowReactive。

您可以在我们的测试套件中找到 示例。

由于 Rich-Harris/devalue#58，这一切都是可能的。 很长一段时间以来，由于序列化错误和其他非 POJO 对象的问题，Nuxt 一直在使用我们自己的贬值分叉，但我们现在已经过渡回原来的。

您甚至可以使用新的对象语法 Nuxt 插件注册您自己的自定义类型：

ts
export default definePayloadPlugin(() => {
  definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
  definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})

您可以在 此处 阅读更多有关其工作原理的信息。

交互式服务器组件

这个功能应该被认为是高度实验性的，但由于 @huang-julien 的一些出色工作，我们现在支持通过_slots_ 在服务器组件内交互内容([#20284]( https://github.com/nuxt/nuxt/pull/20284））。

您可以遵循 #19772 中的服务器组件路线图。

⏰ 环境配置

您现在可以在 nuxt.config 中配置完全类型化的、针对每个环境的覆盖：

js
export default defineNuxtConfig({
  $production: {
    routeRules: {
      '/**': { isr: true }
    }
  },
  $development: {
    //
  }
})

如果您正在创作图层，您还可以使用 $meta 键来提供您或图层的使用者可能使用的元数据。

阅读更多：#20329。

💪 完全类型的页面

通过这个与 https://github.com/posva/unplugin-vue-router 的实验性集成，您可以从 Nuxt 应用程序中的完全类型化路由中受益 - 感谢 @posva 的一些出色工作！ 开箱即用，这将启用 navigateTo、<NuxtLink>、router.push() 等类型的用法。 您甚至可以使用 const route = useRoute('route-name') 在页面中获取类型参数。

ts
export default defineNuxtConfig({
  experimental: {
    typedPages: true
  }
})

🔎 'Bundler' 模块解析

我们现在在 Nuxt 中完全支持 模块解析 的“捆绑器”策略。 如果可能，我们建议采用此方法。 例如，它具有对子路径导出的类型支持，但与“Node16”分辨率相比，它更符合 Vite 和 Nuxt 等构建工具的行为。

ts
export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        moduleResolution: 'bundler'
      }
    }
  }
})

这会打开 TypeScript 的“跟随”节点子路径导出的能力。 例如，如果一个库有一个子路径导出，比如映射到 mylib/dist/path.mjs 的 mylib/path，那么可以从 mylib/dist/path.d.ts 中提取类型 而不是要求库作者创建 mylib/path.d.ts。

⚗️ 独立的服务器类型

我们计划在您的 IDE 中提高应用程序的“nitro”和“vue”部分之间的清晰度，并且我们已经通过为您的 ~/server 目录（ #20559）。 您可以通过添加具有以下内容的附加 ~/server/tsconfig.json 来使用：

json
{
  "extends": "../.nuxt/tsconfig.server.json"
}

虽然现在在类型检查时不会考虑这些值，但您应该在 IDE 中获得更好的类型提示。

💀弃用

虽然我们没有输入或记录 Nuxt 2 中的 build.extend 钩子，但我们一直在 webpack 构建器中调用它。 我们现在明确反对这一点，并将在未来的次要版本中将其删除。

✅ 升级

像往常一样，我们的升级建议是运行：

这也将刷新您的锁定文件，并确保您从 Nuxt 依赖的其他依赖项中提取更新，特别是在 unjs 生态系统中。

👉 Changelog

compare changes

🚀 Enhancements

  • kit: Add prepend option to addImportsDir (#20307)
  • nuxt: Add scoped helper for clearing error within boundary (#20508)
  • nuxt: Auto import 'watchPostEffect' and 'watchSyncEffect' from vue (#20279)
  • vite: Introduce vite:configResolved hook (#20411)
  • webpack: Introduce webpack:configResolved hook (#20412)
  • kit: Allow vite and webpack plugins to be prepended (#20403)
  • nuxt: Add layer meta and env overrides to config types (#20329)
  • test-utils: Add option to configure test server port (#20443)
  • nuxt: Allow access to components within app (#20604)
  • kit: Support passing getter to addVitePlugin and addWebpackPlugin (#20525)
  • cli: Allow greater control of nuxi analyze from cli (#20387)
  • nuxt: Add nuxtApp.runWithContext (#20608)
  • deps: Upgrade to nitropack v2.4 (#20688)
  • nuxt: Add experimental typedPages option (#20367)
  • nuxt: Add apps to nuxt build-time instance (#20637)
  • cli: Allow passing overrides to other nuxi commands (#20760)
  • schema: Enable rich json payloads by default (#20770)
  • deps: Update vue to v3.3 (#20478)
  • nuxt: Use runWithContext within callWithNuxt (#20775)
  • nuxt: Add useRequestURL helper (#20765)
  • nuxt: Allow fallback production content in <DevOnly> (#20817)
  • kit: addBuildPlugin for builder-agnostic implementation (#20587)
  • nuxt: Allow keeping fallback for NuxtClientFallback (#20336)
  • nuxt: Support separate server tsconfig (#20559)
  • nuxt: Full scoped slots support for server components (#20284)
  • nuxt: Support parallel plugins (#20460)

🩹 Fixes

  • nuxt: Remove backwards-compatible runtimeConfig proxy (#20340)
  • nuxt: Add @nuxt/devtools module before core modules (#20595)
  • nuxt: Properly handle query for component wrapper (#20591)
  • nuxt: Skip payload extraction for island context (#20590)
  • nuxt: Remove internal <FragmentWrapper> (#20607)
  • nuxt: Ensure useError is called with nuxt app context (#20585)
  • nuxt: Run page meta plugin on all pages (and only pages) (#20628)
  • nuxt, vite: Ignore nuxt_component ssr style and isVue (#20679)
  • webpack: Warn when using deprecated build.extend hook (#20605)
  • nuxt: Allow resolving client nuxt app to singleton (#20639)
  • nuxt: Generate empty sourcemaps for wrappers (#20744)
  • nuxt: Prevent treeshaking hooks with composable names (#20745)
  • kit: Prefer esm resolution for modules to install (#20757)
  • vite: Expand fs.allow dirs to include app files (#20755)
  • nuxt: Deduplicate global components before registration (#20743)
  • nuxt: Remove webstorm compatibility augmentation (0258acdc8)
  • nuxt: Enable suspensible behaviour for nested pages (#20777)
  • cli: Hard-reload nuxt when .env changes (#20501)
  • nuxt: Avoid destructuring error prop (works around upstream bug) (#20795)
  • nuxt: Always inline styles for server/island components (#20599)
  • nuxt: Allow serialising undefined refs (#20828)
  • nuxt: Transform client fallbacks directly on SFCs (#20835)
  • vite: Dedupe/optimize more vue core deps (#20829)
  • nuxt: Get fallback for <DevOnly> from parsed html (#20840)
  • nuxt: Ensure all dir parts are present in component name (#20779)
  • nuxt: Allow pages:extend to enable pages module (#20806)
  • nuxt: Stop loading indicator on vue errors (#20738)
  • nuxt: Add types for webpack/vite environments (#20749)
  • nuxt: Pass from + savedPosition to first scrollBehavior (#20859)

💅 Refactors

  • schema: Move runtimeCompiler option out of experimental (#20606)
  • kit: Use esm utils for resolvePath (#20756)

📖 Documentation

  • Fix typo (#20577)
  • Update tailwind configuration guide (#20598)
  • Fix fetch composable examples (#20603)
  • Note that useCookie does not share state (#20665)
  • Selective pre-rendering options (#20670)
  • Ensure we guard all navigateTo examples (#20678)
  • Add useSeoMeta and useServerSeoMeta pages (#20656)
  • Recommend <NuxtLayout> when migrating error.vue (#20690)
  • Add lagon to presets list (#20706)
  • Add await before lazy composable examples (7e7e006e9)
  • Add missing step migrating to pinia (#20778)
  • Server directory improvements (d53cc604d)

🏡 Chore

✅ Tests

  • Test with bundler module resolution (#20629)

🤖 CI

最后更新：2023-12-09