- 综合排序
- 最热优先
- 最新优先
- 来自专栏Coooooooooode！（前端）
Nuxt3 反向代理配置
://xxx.com/api', // 这里是接口地址 changeOrigin: true, prependPath: true } }, // 该配置用于服务端请求转发 routeRules: { '/api/**': { proxy: 'https://xxx.com/api/**' } } }})不配置routeRules 的话请求数据时就可以写成,如果不配置routeRules，会使页面首屏加载时，请求错误。 'https://i.maoyan.com/api' : '', 如果不配置routeRules，兼容服务端与客户端请求可以这样写 })
2.9K31编辑于 2023-10-30 Nuxt3全栈开发 · 配置篇
最近在用Nuxt3全栈开发个人博客，踩了不少小坑，这篇文章总结一下。依赖库及博客主要功能先来介绍一下我用到了哪些 Nuxt3 的相关生态及对应的功能。 和文章有一致的表现，也可以通过tailwindcss自定义样式prisma 管理数据库（sqlite3）gitea 管理代码仓库（私有）。 如果没有表明在何处配置，则默认是在 nuxt.config.ts 的顶级如果代码中变量明显没有引入，则是使用了 Nuxt3 的 auto imports颜色模式colorMode: { preference 这里没有什么特殊用法，所以可以直接查看所有配置 。 这也是后面文章输出的重点方向，即 Nuxt3 的全栈开发。欢迎关注 「早早集市」
91600编辑于 2025-01-24- 来自专栏Coooooooooode！（前端）
Nuxt3 项目基础配置超详细 and 项目模板
Nuxt特点 自动化 自动导入 （文件系统自动配置路由） 零配置支持Typescript 配置构建工具 渲染模式 - 通用渲染（服务器端渲染和水化渲染） - 客户端渲染 - 完整的静态站点生成 - 混合渲染（每个路由的缓存策略） PS：虽然很便捷，但是很多坑 Nuxt基础配置模板地址 https://github.com/Seven7v/Nuxt3-vue3-project git clone https://github.com/Seven7v/Nuxt3-vue3-project.git 首先安装一个Nuxt项目 npx nuxi@latest init may-app // poges 文件夹中的页面会自动配置好页面路由。 ，但是并不详细 内联配置 <!
3.1K33编辑于 2023-11-01 - 来自专栏Nuxt.js 实战系列
Nuxt3 实战 (七)：配置 Supabase 数据库
前言 这个章节我们要先把数据库的环境配置好，古人云：工欲善其事，必先利其器。 MongoDB，也用过 ORM 框架比如：Sequelize、TypeORM，本来计划使用 Prisma，后来认真看了 Nuxt 集成的数据库模块后，还是选择了 Supabase，在我看来主要原因有3点 SUPABASE\_URL 和 SUPABASE\_KEY SUPABASE\_URL="https://example.supabase.co" SUPABASE\_KEY="<your\_key>" 3、 }, }) 这里我们先将配置 redirect 设置为 false，因为 Supabase 默认如果未经身份验证的用户试图访问受保护的登录页面，则自动重定向到配置的登录页面。 service\_role：此密钥具有绕过行级安全性的能力，永远不要公开分享 3、 在开发环境中，我们往往需要不用完成身份认证就能执行数据库操作，这时候你就可以把 SUPABASE\_KEY 设置成
2.6K00编辑于 2025-08-13 - 来自专栏小小孩子们的博客
nuxt3目录结构详解
nuxt3目录结构详解 在 Nuxt.js 3 中，一个应用程序的文件夹结构具有一定的规范性。 Server 工具 服务器路由是由unjs/h3提供的，它附带了一组方便的助手。 Read more in Available H3 Request Helpers. 自定义配置可能会影响生产部署，因为当Nitro在Nuxt的小版本中升级时，配置接口可能会随着时间的推移而改变。 middleware/foo/bar.js App Config File Nuxt 3提供了一个app.config配置文件公开应用程序中的响应性配置，能够在生命周期内的运行时更新它，或者使用nuxt 要将配置和环境变量暴露给应用程序的其余部分，你需要在'app.config 文件配置。
4.7K10编辑于 2024-02-03 - 来自专栏柠檬先生
初步学习Nuxt3
Nuxt3 用于制作ssr 网页 支持vue3 所有的语法，并且支持了TypeScript, vite+vue3+composition api + ts。 1.Nuxt3安装 初始化函数 npx nuxi init nuxt3-test 进入项目 cd nuxt3-test 安装依赖包 npm install 运行项目 // Git的配置目录，比如一些文件不用Git管理就可以在这个文件中配置 - app.vue // 项目入口文件，你可以在这里配置路由的出口 - nuxt.config.ts // nuxt 项目的配置文件 ，这个里边可以配置Nuxt项目的方法面面 - package-lock.json // 锁定安装时包的版本，以保证其他人在 npm install时和你保持一致 - package.json // 包的配置文件和项目的启动调式命令配置 - README.md // 项目的说明文件 - tsconfig.json // TypeScript的配置文件 3.Nuxt3约定路由,嵌套路由
1.5K30编辑于 2022-06-27 - 来自专栏Coooooooooode！（前端）
Nuxt3 基于H3做后台接口
Nuxt3实现接口 Nuxt3 是使用node做ssr页面渲染的， 自带了H3 可以对接口进行处理。 Nuxt3 自动扫描 ~/server/api,~/server/routes,~/server/middleware目录中的文件，进行注册对应的接口 目录结构 即目录结构为↓，访问/api/login 就是接口的返回内容 这里需要注意，如果我们即使用代理，又要使用nuxt3来写接口的话，在代理时不可以使用api作为代理名称，否则访问就会被代理到对应地址。 >({ name: [ { required: true, message: 'Please input username', trigger: 'blur' }, { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' } ], password: [ { required: true
2.2K41编辑于 2023-11-24 - 来自专栏Coooooooooode！（前端）
Nuxt3 数据请求 useAsyncDatauseFetch
配置SSR Nuxt3 默认首屏SSR，由服务端渲染，可以通过配置 ssr:false 来取消服务端渲染 nuxt.config.ts export default defineNuxtConfig({ ) 数据请求 根据vue 的声明周期，只有 setup beforeCreate Created**里的内容会在服务端执行，所以如果是首屏服务端渲染时，需要将获取数据方法写到这几个生命周期之中** Nuxt3 有封装好的$fetch方法做数据请求，可以不需要引入第三方axios或者fetch做数据请求，可能会出现多个请求数据混乱问题 下列情况都是不需要跨域的请求，服务端和客户端不需要做其他配置代理就可以请求的内容 key值，防止请求过多数据混乱，lazy默认为false ，会在从别的页面跳转进来时阻塞路由跳转 即：需要先请求完后路由才会切换 useLazyAsyncData 的lazy默认为true 不需要再额外写配置
4.8K41编辑于 2023-10-30 - 来自专栏Nuxt.js 实战系列
Nuxt3 实战 (四)：安装 Nuxt UI 和配置 Typescript 类型检查
add @nuxt/ui 2、 添加到 nuxt.config 模块中 export default defineNuxtConfig({ modules: ['@nuxt/ui'] }) 3、 Home', icon: 'i-heroicons-home' }, { label: 'Navigation', icon: 'i-heroicons-square-3- stack-3d' }, { label: 'Breadcrumb', icon: 'i-heroicons-link' } ] </script> 可以看到 Nuxt UI tailwindcss 的类名都生效了： 如果你遇到 icon 类似的错误，你应该还需要安装 @iconify-json/heroicons 这个库 pnpm add @iconify-json/heroicons 配置 TypeScript 1、 安装依赖 pnpm add -D vue-tsc@^1 typescript 2、 添加到 nuxt.config 配置中 export default defineNuxtConfig
1.4K10编辑于 2025-08-13 - 来自专栏无所事事者爱嘲笑
nuxt3 + ts + eslint+ prettier
初始化nuxt3项目 如果报错参考这篇 添加eslint和prettier 安装以下包，版本不限（这些版本暂时无报错） { "@vue/eslint-config-prettier": "^7.0.0 eslint-plugin-vue": "^9.3.0", "prettier": "^2.7.1", "typescript": "^4.9.5", "eslint-plugin-nuxt": "^4.0.0", // 针对nuxt3 针对nuxt3的校验规则 '@vue/eslint-config-typescript', '@vue/eslint-config-prettier', ], parserOptions `␍`eslint(prettier/prettier)报错，如出现添加此项即可，不是最佳方案，详见补充2 }, ], }, } 注释都是需要注意的地方和常见错误 补充 因为nuxt3 所以在nuxt3项目中使用'plugin:nuxt/recommended'替换'eslint:recommended'规则，在vue-cli项目中可以使用'eslint:recommended'即可。
3K40编辑于 2023-03-01 - 来自专栏Coooooooooode！（前端）
Nuxt3 plugins(插件) element plus 使用
要我说，如果要定义全局公共方法不如在composables中创建文件，定义方法好用。
1.3K20编辑于 2023-11-02 - 来自专栏Nuxt.js 实战系列
Nuxt3 实战 (五)：Header 头部布局
pnpm add @nuxt/image nuxt-icons -D nuxt.config.ts 文件中启用： modules: ['@nuxt/image', 'nuxt-icons'], 3、 static top-0 h-14 shadow-md dark:shadow-white-500/50 backdrop-blur dark:bg-transparent transition-all py-3
66410编辑于 2025-08-13 - 来自专栏秃头开发头秃了
Nuxt3正式发布！5个纬度全方位感受Nuxt3的魅力！
引子 大家好，我 HoMeTown，在Nuxt3公测版过去的一年里，RC版中进行了各种性能改进与功能新增，11月16日，Nuxt3终于迎来了第一个稳定版本3.0的正式发布！ 除了基本的3种模式，Nuxt3 还支持一些无服务器环境，比如AWS Lambda。Nuxt3 也根据环境进行了预置方案，可以部署在Serverless、Workers等搭建成本比较高的环境中。 因为现在Nuxt3将其渲染规则描述为Hybrid Rendering，所以开发者可以进行灵活地配置与设置，比如在具体的每个页面之间切换 SSR 和 CSR渲染模式，以及仅针对 API 设置缓存期限和 ISR 参考：Nuxt3 渲染模式 基于Vue3的高性能开发！ 默认采用Vite作为构建工具，构建与热加载速度非常快，script setupComponsition API的所有功能，无需配置，都可以自动导入。
4.3K30编辑于 2023-01-10 - 来自专栏Nuxt.js 实战系列
Nuxt3 实战 (二)：配置 Eslint、Prettierrc、Husky等项目提交规范
安装 Eslint 1、 Nuxt3 中是使用 @nuxt/eslint-config 进行代码检查和格式化，执行安装命令： pnpm add -D eslint @nuxt/eslint-config 2、 配置 .eslintrc.cjs 文件，具体配置请参考Eslint 配置规则： module.exports = { root: true, env: { browser: comma-dangle': [2, 'never'], // 键值对最后一个不能有, 'spaced-comment': ['error', 'always'] // 注释必须空格 } } 3、 lint-staged" 3、可以根据项目需要在 package.json 中添加配置，或者根目录新建 .lintstagedrc 配置文件： { "lint-staged": { "* body-leading-blank': [0], // body换行 'footer-leading-blank': [0, 'always'] // footer以空行开头 } } 3.
1.3K10编辑于 2025-08-13 - 来自专栏Coooooooooode！（前端）
Nuxt3 状态管理 useState && pinia
useStateNuxt3 封装了useState 可以用作简单的状态管理，直接定义，修改value值后，其他页面就可以同步修改状态举个栗子网页国际化 需要切换语言<! cookieLang.value = lang.value }pinia做过多的状态管理可以使用pinia 安装npm install pinia @pinia/nuxtnuxt.config.js配置 其他配置 modules: [ // ... 可以自动将内容存入cookie 在 Nuxt3 中只有cookie时可以服务端和客户端都能获取到的npm i -D @pinia-plugin-persistedstate/nuxtnuxt.config.jsexport defineNuxtConfig({ modules: [ '@pinia/nuxt', '@pinia-plugin-persistedstate/nuxt', ],})在pinia中使用，option写法中 配置
2.6K52编辑于 2025-08-06 - </template> 3、 这里我们顺便给 AppColorMode 组件加个切换过渡动画，让网站丰富一点： <script</template> 2、 layouts/default.vue 文件配置组件 -- footer --> <AppFooter />来自专栏Nuxt.js 实战系列
Nuxt3 实战 (六)：Footer 底部布局
{ src: '/logo.svg' }" />
<NuxtImg src="/icp.png" alt="粤ICP备2023007649号-<em>3</em>" class="w-4" /> 粤ICP备2023007649号-3</ULink> tip="博客" />
Nuxt3初探（四）——layouts的使用
基本概念 layouts是Nuxt3提供的一种方便开发者快速实现自定义布局的约定 使用该约定需要在根目录下创建layouts文件夹，并在里面创建.vue文件用来作为布局模板。
Nuxt3中pinia持久化处理！
在使用nuxt3开发SSR渲染的项目的时候，如何将pinia持久化到本地？如何自动引入自定义的仓库store模块，减少手动引入的麻烦？ 安装完成后在nuxt.config.js中进行以下配置。 1、在modules中配置刚刚安装的两个模块依赖。 2、pinia 中设置storesDirs，就能直接在页面使用相关store的配置，而无需手动引入。 'localStorage' : 'cookies', debug: import.meta.env.DEV }, }) 另外有的解决方法中，让在plugins 新建如下插件配置，经过测试后其实是没有用的 $pinia.use(piniaPluginPersistedstate) }) 然后在自定义pinia的模块中添加 persist:true选项来进行持久化配置。
Nuxt3 实战 (一)：初始化项目
Nuxt3 的优点基于 Vue3 的优势：Nuxt3 充分利用了 Vue3 的所有优点，包括性能优化、响应式编程和更好的 TypeScript 支持。 模块化：Nuxt3 具有丰富的模块化生态系统，使得开发者能够轻松地扩展应用的功能，减少开发工作量。通过模块化的方式，开发者可以更加高效地组织和管理代码，提高开发效率。 文件系统路由：Nuxt3 的文件系统路由允许开发者通过简单的文件和目录结构来组织应用路由，使得开发过程更加简洁明了。这有助于减少配置工作量，提高开发效率。 性能优化：Nuxt3 通过使用最新的 Web 技术和优化技巧，提供了更好的性能和更快的加载速度。无论是服务端渲染还是静态站点生成，Nuxt3 都能帮助开发者提高应用的性能表现。 灵活的配置和插件系统：Nuxt3 提供了更灵活的配置选项和插件系统，使得开发者能够根据自己的需求进行定制和优化。这使得 Nuxt3 具有很高的可扩展性和灵活性，能够满足各种复杂的开发需求。
Nuxt3的useFetch、useAsyncData、useLazyFetch、useLazyAsyncData的区别
本质上useFetch和useAsyncData没有什么区别，useAsyncData可以在请求的时候编写自己的业务逻辑
