app.vue
<script setup lang="ts">
const version = 3
</script>
<template>
<h1>
Hello Nuxt {{ version }}!
</h1>
</template>
<style scoped>
h1 {
font-size: 3rem;
}
</style>
pages/index.vue
<template>
<h1>Index page</h1>
<NuxtLink to="/blog/hello-world">
Go to blog post
</NuxtLink>
</template>
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.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 能够根据你的需求不断扩展和调整，同时提供卓越的开发者体验。从简单的落地页到可扩展至数百名开发者团队的复杂 Web 应用，Nuxt 应有尽有。我们精心设计了 Nuxt，使其适合各种技能水平的开发者。
- 零配置立即开始使用 Vue 或 Typescript 进行编码 - Nuxt 为你处理所有设置。
- 渲染模式服务器端渲染、客户端渲染、静态站点生成，由你决定，直至页面级别。
- 路线和布局使用我们基于文件的路由系统来构建复杂的基于 URL 的视图，同时重复使用组件以提高性能。
- 数据获取让你的 Vue 组件异步并等待你的数据。Nuxt 提供了强大的可组合函数，用于通用数据获取。
- 错误处理使用我们的内置处理程序和自定义错误页面捕获应用中的错误。
- 转场实现布局、页面和组件之间的平滑转场。
- 资源与样式通过内置支持实现自动图像、字体和脚本优化。
- SEO 和元标签创建可供搜索引擎完全索引的生产就绪应用。
- 模块化使用 200 多个模块扩展 Nuxt 功能，以更快地交付你的应用。
- 中间件在渲染页面之前保护或添加自定义逻辑（本地化、A/B 测试）。
- 使用 TypeScript 实现类型安全使用自动生成的类型和 tsconfig.json 编写类型安全的代码。
- 立即深入了解 Nuxt
建立在坚实的基础之上
Nuxt 建立在坚固的开源技术之上，可以灵活地在不同的构建工具之间进行选择。
使用 Vue.js 的前端
Nuxt 建立在 Vue.js 之上，利用其基于组件的反应式架构来创建强大、可扩展且无缝的 Web 应用。
使用 Vite 的打包器
Nuxt 利用 Vite 的前端构建功能，通过即时 HMR 实现 Web 应用的快速开发，从而获得最佳的开发者体验。
使用 Nitro 的服务器
Nuxt 使用 Nitro 作为服务器引擎来构建多功能全栈 Web 应用，可在任何平台上部署。