全栈
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 为通用数据获取提供了强大的组合式函数（composables）。
- 错误处理利用我们内置的处理器和自定义错误页面来捕获应用中的错误。
- 过渡在布局、页面和组件之间实现平滑的过渡效果。
- 资源与样式受益于内置支持的图像、字体和脚本自动优化功能。
- 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、静态站点还是边缘计算（Edge）——Nuxt 都能适配你的平台。
由全球开发者构建
数百名贡献者让 Nuxt 每天都在进步。加入我们。
案例展示
