- 综合排序
- 最热优先
- 最新优先
- 来自专栏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.7K31编辑于 2023-10-30 - 来自专栏Coooooooooode！（前端）
Nuxt3 项目基础配置超详细 and 项目模板
Nuxt特点 自动化 自动导入 （文件系统自动配置路由） 零配置支持Typescript 配置构建工具 渲染模式 - 通用渲染（服务器端渲染和水化渲染） - 客户端渲染 - 完整的静态站点生成 - 混合渲染（每个路由的缓存策略） PS：虽然很便捷，但是很多坑 Nuxt基础配置模板地址 https://github.com/Seven7v/Nuxt3-vue3-project git poges 文件夹中的页面会自动配置好页面路由。 ，但是并不详细 内联配置 <! localStorage.getItem('token')) { return navigateTo('/login') //一定要写return } }) 页面如果需要用到中间件的地方只需要配置
2.7K33编辑于 2023-11-01 Nuxt3全栈开发 · 配置篇
最近在用Nuxt3全栈开发个人博客，踩了不少小坑，这篇文章总结一下。依赖库及博客主要功能先来介绍一下我用到了哪些 Nuxt3 的相关生态及对应的功能。 如果没有表明在何处配置，则默认是在 nuxt.config.ts 的顶级如果代码中变量明显没有引入，则是使用了 Nuxt3 的 auto imports颜色模式colorMode: { preference Shiki，同时和 color-mode 兼容，可以查看 更多官方文档sources 是核心配置，官方的默认配置是 base: resolve(__dirname, 'content') , 即从当前项目下的 这里没有什么特殊用法，所以可以直接查看所有配置 。 这也是后面文章输出的重点方向，即 Nuxt3 的全栈开发。欢迎关注 「早早集市」
67800编辑于 2025-01-24- 来自专栏Nuxt.js 实战系列
Nuxt3 实战 (七)：配置 Supabase 数据库
前言 这个章节我们要先把数据库的环境配置好，古人云：工欲善其事，必先利其器。 SUPABASE\_URL="https://example.supabase.co" SUPABASE\_KEY="<your\_key>" 3、 打开 nuxt.config.ts 文件，添加配置 ： export default defineNuxtConfig({ modules: ['@nuxtjs/supabase'], // 自定义配置_ supabase: { redirect: false _// https://supabase.nuxtjs.org/get-started#redirect_ }, }) 这里我们先将配置 redirect 设置为 false，因为 Supabase 默认如果未经身份验证的用户试图访问受保护的登录页面，则自动重定向到配置的登录页面。
1.8K00编辑于 2025-08-13 - 来自专栏小小孩子们的博客
nuxt3目录结构详解
nuxt3目录结构详解 在 Nuxt.js 3 中，一个应用程序的文件夹结构具有一定的规范性。 自定义配置可能会影响生产部署，因为当Nitro在Nuxt的小版本中升级时，配置接口可能会随着时间的推移而改变。 为了配置额外的存储挂载点，你可以使用nitro.storage。 middleware/foo/bar.js App Config File Nuxt 3提供了一个app.config配置文件公开应用程序中的响应性配置，能够在生命周期内的运行时更新它，或者使用nuxt 要将配置和环境变量暴露给应用程序的其余部分，你需要在'app.config 文件配置。
4.5K10编辑于 2024-02-03 - 来自专栏Nuxt.js 实战系列
Nuxt3 实战 (四)：安装 Nuxt UI 和配置 Typescript 类型检查
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.2K10编辑于 2025-08-13 - 来自专栏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: 配置 Husky 1、执行安装命令 pnpm add husky -D 2、 初始化脚本 pnpm exec husky init 完成之后会在根目录生成一个 .husky 文件夹。 lint-staged" 3、可以根据项目需要在 package.json 中添加配置，或者根目录新建 .lintstagedrc 配置文件： { "lint-staged": { "* 配置 Commitlint 1.
1K10编辑于 2025-08-13 - 来自专栏柠檬先生
初步学习Nuxt3
Nuxt3 用于制作ssr 网页 支持vue3 所有的语法，并且支持了TypeScript, vite+vue3+composition api + ts。 dev 2.Nuxt3基础目录结构 - .nuxt // 自动生成的目录，用于展示结果 - node_modules // 项目依赖包存放目录 - .gitignore // Git的配置目录 ，比如一些文件不用Git管理就可以在这个文件中配置 - app.vue // 项目入口文件，你可以在这里配置路由的出口 - nuxt.config.ts // nuxt项目的配置文件 ，这个里边可以配置 Nuxt项目的方法面面 - package-lock.json // 锁定安装时包的版本，以保证其他人在 npm install时和你保持一致 - package.json // 包的配置文件和项目的启动调式命令配置 - README.md // 项目的说明文件 - tsconfig.json // TypeScript的配置文件 3.Nuxt3约定路由,嵌套路由 根目录下新建pages 然后文件夹里面新建
1.4K30编辑于 2022-06-27 - 来自专栏Nuxt.js 实战系列
Nuxt3 实战 (五)：Header 头部布局
这两周一直忙公司系统的迭代需求，没啥时间捣鼓自己的小项目，趁着项目进入测试收尾阶段，抽空把 Layout 布局的 Header 部分先搞好。
49810编辑于 2025-08-13 - 来自专栏Coooooooooode！（前端）
Nuxt3 plugins(插件) element plus 使用
要我说，如果要定义全局公共方法不如在composables中创建文件，定义方法好用。
1.2K20编辑于 2023-11-02 - 来自专栏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.6K41编辑于 2023-10-30 - 来自专栏无所事事者爱嘲笑
nuxt3 + ts + eslint+ prettier
初始化nuxt3项目 如果报错参考这篇 添加eslint和prettier 安装以下包，版本不限（这些版本暂时无报错） { "@vue/eslint-config-prettier": "^7.0.0 的校验插件 } 创建eslint配置文件 .eslintrc.js 或其它文件格式，在文件中配置： module.exports = { env: { browser: true, es2021: true, }, extends: [ 'plugin:vue/vue3-recommended', 'plugin:nuxt/recommended', // 针对nuxt3 所以在nuxt3项目中使用'plugin:nuxt/recommended'替换'eslint:recommended'规则，在vue-cli项目中可以使用'eslint:recommended'即可。 方案1：在根目录下添加.editorconfig文件添加配置，然后重启ide .editorconfig常用备选配置： root = true [*] indent_style = space indent_size
2.9K40编辑于 2023-03-01 - 来自专栏秃头开发头秃了
Nuxt3正式发布！5个纬度全方位感受Nuxt3的魅力！
引子 大家好，我 HoMeTown，在Nuxt3公测版过去的一年里，RC版中进行了各种性能改进与功能新增，11月16日，Nuxt3终于迎来了第一个稳定版本3.0的正式发布！ 因为现在Nuxt3将其渲染规则描述为Hybrid Rendering，所以开发者可以进行灵活地配置与设置，比如在具体的每个页面之间切换 SSR 和 CSR渲染模式，以及仅针对 API 设置缓存期限和 ISR 参考：Nuxt3 渲染模式 基于Vue3的高性能开发！ 默认采用Vite作为构建工具，构建与热加载速度非常快，script setupComponsition API的所有功能，无需配置，都可以自动导入。 Nuxt3可以让你自己去补充一些你觉得框架不够的核心功能，比如现有的@nuxt/image、@nuxt/content等等。 参考：Nuxt3 模块 完结
4.2K30编辑于 2023-01-10 - 来自专栏Coooooooooode！（前端）
Nuxt3 基于H3做后台接口
Nuxt3实现接口 Nuxt3 是使用node做ssr页面渲染的， 自带了H3 可以对接口进行处理。 Nuxt3 自动扫描 ~/server/api,~/server/routes,~/server/middleware目录中的文件，进行注册对应的接口 目录结构 即目录结构为↓，访问/api/login 就是接口的返回内容 这里需要注意，如果我们即使用代理，又要使用nuxt3来写接口的话，在代理时不可以使用api作为代理名称，否则访问就会被代理到对应地址。
2K41编辑于 2023-11-24 - 来自专栏Nuxt.js 实战系列
Nuxt3 实战 (一)：初始化项目
Nuxt3 的优点基于 Vue3 的优势：Nuxt3 充分利用了 Vue3 的所有优点，包括性能优化、响应式编程和更好的 TypeScript 支持。 文件系统路由：Nuxt3 的文件系统路由允许开发者通过简单的文件和目录结构来组织应用路由，使得开发过程更加简洁明了。这有助于减少配置工作量，提高开发效率。 性能优化：Nuxt3 通过使用最新的 Web 技术和优化技巧，提供了更好的性能和更快的加载速度。无论是服务端渲染还是静态站点生成，Nuxt3 都能帮助开发者提高应用的性能表现。 灵活的配置和插件系统：Nuxt3 提供了更灵活的配置选项和插件系统，使得开发者能够根据自己的需求进行定制和优化。这使得 Nuxt3 具有很高的可扩展性和灵活性，能够满足各种复杂的开发需求。 app.config.ts // 使用App Config文件在应用程序中公开响应式配置。 nuxt.config.ts // Nuxt可以通过一个单独的nuxt.config文件进行简单配置。
1.2K20编辑于 2025-08-13 - 来自专栏Coooooooooode！（前端）
Nuxt3 状态管理 useState && pinia
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.5K52编辑于 2025-08-06 - </template> 2、 layouts/default.vue 文件配置组件来自专栏Nuxt.js 实战系列
Nuxt3 实战 (六)：Footer 底部布局
tip="博客" />
Nuxt 3 来了！
先放个彩蛋，Nuxt3 官网有趣的小交互： NuxtJS 让你构建你的下一个 Vue.js 应用程序变得更有信心。这是一个开源的框架，让 Web 开发变得简单而强大。 Webpack 5 更快的构建速度和更小的构建产物，并且零配置。 Vite 用 Vite 作为你的打包器，体验轻量级的快速 HMR。 Vue3 Vue3 会成为您下一个应用的坚实基础。 流畅的升级到 Nuxt3 我们致力于在让用户更加轻松的从 Nuxt2 升级到 Nuxt3。 遗留的插件和模块将保持工作 Nuxt2 配置是兼容的 部分 pages options API 可用 将 Nuxt 3 的体验带到现有的 Nuxt2 项目中 当我们在开发 Nuxt 3 的新特性的同时， 在 Nuxt2 中启用 Nitro 在 Nuxt2 中使用 Composition API（和 Nuxt3 一样） 在 Nuxt2 中使用新的 CLI 和 Devtools 渐进式升级到 Nuxt3 兼容
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选项来进行持久化配置。
