全栈
Vue 框架
使用 Vue 快速构建生产就绪的 Web 应用。基于文件的路由、自动导入和服务器端渲染 — 全部开箱即用配置。
app/app.vue
<script setup lang="ts">
const version = 4
</script>
<template>
<h1>
Hello Nuxt {{ version }}!
</h1>
</template>
<style scoped>
h1 {
font-size: 3rem;
}
</style>
app/pages/index.vue
<template>
<h1>Index page</h1>
<NuxtLink to="/blog/hello-world">
Go to blog post
</NuxtLink>
</template>
app/pages/index.vue
<script setup lang="ts">
const { data: page } = await useFetch('/api/cms/home')
</script>
<template>
<h1>{{ page.title }}</h1>
<NuxtLink to="/blog/hello-world">
Go to blog post
</NuxtLink>
</template>
app/app.vue
<script setup>
const message = ref('Nuxt')
const hello = () => sayHello(message.value)
</script>
<template>
<main>
<h1>Demo with auto imports</h1>
<form @submit.prevent="hello">
<MyInput v-model="message" />
<button type="submit">Say Hello</button>
</form>
</main>
</template>
server/api/hello.ts
export default defineEventHandler((event) => {
return {
message: 'Hello World'
}
})
全球领先企业的选择
您需要的一切，没有多余
Nuxt 处理架构，您可以专注于构建。
- 零配置立即开始使用 Vue 或 TypeScript 编码 — Nuxt 为您处理所有设置。
- 渲染模式服务器端渲染、客户端渲染、静态站点生成，由您决定，甚至可以到页面级别。
- 路由和布局使用基于文件的路由系统构建复杂的基于 URL 的视图，同时复用组件以提高性能。
- 数据获取使您的 Vue 组件异步并等待数据。Nuxt 为通用数据获取提供了强大的组合式函数。
- 错误处理使用内置处理器和自定义错误页面捕获应用程序中的错误。
- 过渡效果在布局、页面和组件之间实现平滑的过渡。
- 资源和样式通过内置支持从自动图像、字体和脚本优化中受益。
- SEO 和 Meta 标签创建可被搜索引擎完全索引的生产就绪应用程序。
- 模块化使用 200+ 模块扩展 Nuxt 功能，更快地交付应用程序。
- 中间件在渲染页面之前保护或添加自定义逻辑（本地化、A/B 测试）。
- TypeScript 类型安全使用自动生成的类型和 tsconfig.json 编写类型安全代码。
- 现在深入了解 Nuxt
建立在经过验证的工具之上
前端使用 Vue。服务器使用 Nitro。打包器由您选择。
使用 Vue.js 的前端
Nuxt 构建在 Vue.js 之上，利用其响应式、基于组件的架构创建强大、可扩展且无缝的 Web 应用程序。
使用 Vite 的打包器
Nuxt 利用 Vite 的前端构建能力，通过即时 HMR 为 Web 应用程序提供快速开发，提供最佳的开发者体验。
使用 Nitro 的服务器
Nuxt 使用 Nitro 作为服务器引擎来构建多功能的全栈 Web 应用程序，准备在任何平台上部署。
受全球开发者信赖
为初创公司到企业提供动力。100% 开源。
使用即插即用模块扩展 Nuxt
Nuxt 拥有丰富的模块生态系统，既有官方的，也有社区驱动的。这通过为常见需求提供即用型解决方案来加速开发。
随处部署
一个命令部署。SSR、静态或边缘 — Nuxt 适应您的平台。
由全球开发者构建
数百名贡献者每天都在让 Nuxt 变得更好。加入我们。
展示案例
