全端
Vue 框架
使用 Vue 構建快速、具備正式生產能力的網路應用程式。檔案系統路由、自動匯入和伺服器端渲染 —— 全部開箱即用。
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 為您處理所有設定。
- 渲染模式伺服器端渲染、用戶端渲染、靜態網站生成，由您決定，甚至可以精細到頁面層級。
- 路由與佈局使用我們的檔案系統路由，在構建複雜的網址視圖時，同時透過重複使用元件來提升效能。
- 資料獲取讓您的 Vue 元件變為非同步並等待數據。Nuxt 提供強大的組合式函式（Composables）用於通用數據獲取。
- 錯誤處理使用內建的處理器和自定義錯誤頁面捕捉應用程式中的錯誤。
- 轉場 (Transitions)在佈局、頁面和元件之間實現平滑轉場。
- 資產與樣式透過內建支援享受自動化的圖片、字體和腳本優化。
- SEO 與 Meta 標籤建立具備正式生產能力且能被搜尋引擎完全索引的應用程式。
- 模組化使用 200 多個模組擴充 Nuxt 功能，加速應用程式上線。
- 中間件 (Middleware)在渲染頁面之前保護路徑或加入自定義邏輯（在地化、A/B 測試）。
- 具備 TypeScript 型別安全透過自動產生的型別與 tsconfig.json 撰寫型別安全的程式碼。
- 現在就深入探索 Nuxt
構建於成熟的工具之上
前端使用 Vue。伺服器使用 Nitro。自由選擇打包工具。
使用 Vue.js 構建前端
Nuxt 構建於 Vue.js 之上，利用其響應式、元件化的架構，打造強大、可擴充且無縫銜接的網路應用程式。
使用 Vite 進行打包
Nuxt 利用 Vite 的前端構建能力，透過即時的熱模組替換 (HMR) 加速網路應用程式開發，提供最佳的開發者體驗。
使用 Nitro 構建伺服器
Nuxt 使用 Nitro 作為伺服器引擎，構建多功能的全端網路應用程式，並可隨時部署至任何平台。
深受全球開發者信賴
助力初創企業至大型企業。100% 開源。
透過隨插即用的模組擴展 Nuxt
Nuxt 擁有豐富的模組生態系統，包含官方與社群推動的模組。這透過為常見需求提供現成的解決方案，進而加速開發。
部署至任何地方
一鍵部署。無論是 SSR、靜態或邊緣運算 —— Nuxt 都能適應您的平台。
由全球開發者共同打造
數百名貢獻者每天都在讓 Nuxt 變得更好。加入我們。
案例展示
