虽然Nuxt4还没有正式发布，但是Nuxt的官方文档中已经更新了很多关于Nuxt4的内容，结合官方的文档和所有合并的PR (可以在改PR中随时关注发布进程)，我们可以做一个从Nuxt3到Nuxt4的迁移，有兴趣的小伙伴一起来看看吧。 迁移准备 在迁移到Nuxt4之前，我们需要先将项目更新到最新的Nuxt3版本，这样有利于减少兼容性问题。使用以下更新

Nuxt 3 提供了许多开箱即用的功能，其中包括默认的错误页面。不过，尽管默认错误页面很好用，通常我们更希望创建属于自己的自定义错误页面。 本文将详细讲解如何编写自定义错误页面，根据错误代码进行定制，并在发生错误时优雅地恢复应用的正常状态。 创建自定义错误页面 在 Nuxt 3 中，要创建一个错误页面，我们需要在项目根目录（与

项目结构 ├── layouts/ │ └── error.vue # 自定义错误页面 ├── pages/ │ ├── index.vue # 首页 │ ├── trigger400.vue # 用于触发 400 错误的页面 │ └── trigger500.vue # 用于触发 500 错误的页面 ├── server/ │ └── api/ │ ├── throw400.js # 模拟 400 错误的 API │ └── throw500.js # 模拟 500 错误的 API 1. 自定义错误

今天看到有小伙伴在Nuxt 3文中社区群里问到这个问题，那就顺便写一篇文章来回答，并且重温一下Nuxt3的路由。 Nuxt 3 多路径访问同一页面 在 Nuxt 3 中，如果你想让两个不同的路径访问同一个页面，有以下几种实现方式： 重定向方式：在其中一个路径中使用 navigateTo 方法重定向到目标页面。 路由别名：在 nuxt.config.ts 中配置路由

AutoAnimate是什么？ 这是FormKit提供的一个动画库。只要安装了这个库，你就可以非常轻松地使用它。虽然这个库支持Vue、React、Preact、Solid、Svelta、Angular和NativeJS，但在本文中，我将介绍如何在Vue中使用它。 官方文档： https://auto-animate.formkit.com/ 设置 首先进行安装 npm install @formkit/auto-animate 接着，在nuxt.con

在使用Nuxt3进行开发时，在服务器模块(/server/api)中处理Bigint时，出现了以下错误： 错误：在配置的目标环境("es2019")中无法使用大整数字面量。 从es2020开始支持Bigint，因此，看来需要更改TypeScript的版本。 服务器模块由Nuxt3内部的Nitro引擎驱动，因此，需要将设置传递给Nitro引擎。 可以在nuxt.config.ts中来指定ES版本： expo

旧的引用方式 这里我们不用ant蚂蚁框架的图标，我们从iconify从导入图标。 iconify图标是一种矢量图标格式，它可以以小尺寸的形式显示在各种设备上，如移动设备、桌面应用程序和网页。iconify图标可以缩放到任何尺寸而不失真，并且可以通过CSS或JavaScript进行动态更改。Iconify图标还支持多种颜色和主题，使其适合各种不同的设计需

安装 npm i --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz 参考文档：https://docs.sheetjs.com/docs/ 代码示例: <script setup> import { ref } from 'vue' import { utils, writeFileXLSX } from 'xlsx' const pres = ref([ { name: '小丽', birthday: '1998-02-22' }, { name: '小美', birthday: '1

<script lang="ts" setup> const route = useRoute() watch( () => route.query, () => { console.log(route['query']) } ) function move() { navigateTo({ name: 'example', query: { foo: 'bar' }, }) } </script> <template> <button @click="move">move</button> </template&g

antdv从4.0.x开始官方提供了@ant-design-vue/nuxt模块包，但如果你只是使用它，不做任何处理的话，你就会发现你的页面在刷新时会短暂的出现css样式丢失的问题，导致页面闪烁，本文就教大家如何解决该问题。 首先，在新建的nuxt3项目中安装相关依赖 pnpm add -D ant-design-vue@4.x pnpm add -D @ant-design-vue/nuxt 在nuxt.config

首先也是要去安装 # Using npm npm install @nuxtjs/i18n@next --save-dev # Using yarn yarn add --dev @nuxtjs/i18n@next # Using pnpm pnpm install --shamefully-hoist -D @nuxtjs/i18n@next 配置nuxt-config.ts export default defineNuxtConfig({ modules: [ '@nuxtjs/i18n', ], }) 配置i18n export default defineN

Nuxt3 可以说是隔三差五就更新，时不时就加点小功能，如果加了开发者模式devtools，在最新的Nuxt3.6.5中解决了 v3.6.4 中引入的 nuxt/content 的回归问题。 它更新的时候，对我们使用的UI框架也会有一些影响，拿最新版的Antd4.0框架来说，根据Antd官方给的安装方式https://next.antdv.com/docs/vue/introduce-cn 也是可以使用，但是

升级到Nuxt3.6报错 Cannot start nuxt: Cannot find module 'typescript' 解决该报错我们只需要安装下typescript依赖即可 yarn add typescript --dev 参考：https://github.com/nuxt/nuxt/issues/21723

什么是SSE SSE（Server-sent events）是一种用于服务器向客户端推送数据的技术，它基于 HTTP 协议，允许服务器不断地向客户端发送事件流数据。与传统的轮询或长轮询相比，SSE 更加高效、实时，并且可以降低服务器和客户端的负载。 SSE 的工作原理是客户端通过 HTTP 请求与服务器建立连接，然后服务器可以在连接保持打开的情况下，不断

本文节选自TeHub小书：https://tehub.com/b/show/9rRbSM55RP/chapter/bMn14mFXKS Nuxt3环境变量配置 通常我们的应用程序会有多个运行环境。比如开发环境、测试环境、预发布环境、生产环境等。而不同环境我们的配置内容可能不一样，这个时候就需要通过环境变量来解决。 Nuxt3 会自动加载 .env 文件中的所有变量，但对于多环境及多个.

虽然官方说目前nuxt3服务端暂不支持创建ws服务器，详见：https://github.com/unjs/nitro/issues/467 https://github.com/nuxt/nuxt/discussions/16663 但是我们还是可以通过以下两种方案启动一个ws服务器 方案一：开发模式hook启动Ws服务器 但是我们开发模式下(yarn dev)还是可以创建一个ws服务器的 安装ws包 yarn add ws 创建

本文内容节选自tehub小书 https://tehub.com/b/show/9rRbSM55RP/chapter/bw7Ta7r6Jx 这个报错目前暂不清楚是Nuxt3还是Antdv或是Vue3导致的。 报错示例 创建一个nuxt3页面pages/test.vue，内容如下： <template> <a-dropdown> <a class="ant-dropdown-link" @click.prevent> Hover me <DownOutlined /&gt