今天來分享 Nuxt.js 官方開源的 3 個基于 Nuxt + Vue 的實戰項目！這些項目可以幫助我們更好地理解和掌握 Nuxt 和 Vue 的概念、編寫更優雅的代碼。

Nuxt Movies

Nuxt Movies 是一個使用 Nuxt 3、Vue 3、UnoCSS、Image Module 和 TypeScript 構建的電影應用，其包含了電影列表、電影詳情、演員詳情、影片搜索、相關推薦等功能。Nuxt Movies 采用了服務端渲染（SSR）技術，同時也支持使用 PWA 技術使網站更加快速地加載和緩存內容。

在線演示：https://movies.nuxt.space/

Github：https://github.com/nuxt/movies

Nuxt Hacker News

Nuxt Hacker News 是一個使用 Nuxt 構建的 HackerNews 克隆，其具有以下特點：

• 服務端渲染
• 基于 Vite 的熱更新（HMR）開發環境
• 無需配置即可在任何地方部署（如 Vercel、Netlify、Cloudflare 等） ，由 Nitro 提供支持
• 代碼分割
• JS + DNS + Data 的預取/預加載功能

在線演示：https://hn.nuxt.space/

Github：https://github.com/nuxt/hackernews

Nuxt Content

Nuxt Content 是 Nuxt.js 官方維護的一個用于快速構建靜態網站的應用。它基于 Vue.js 和 Markdown ，可以輕松地將 Markdown 文件轉換為渲染的 HTML 頁面并在 Nuxt.js 應用中使用。其具有以下特性：

• 使用 Nuxt 3 構建：利用 Nuxt 3 的特性：Vue 3、自動導入、Vite 和 Nitro 服務器。
• 基于文件的 CMS：用 Markdown、YML、CSV 或 JSON 編寫內容，并在組件中查詢它。
• 查詢生成器：使用類似 MongoDB 的 API 查詢內容，以便在正確的時間獲取正確的數據。
• MDC 語法：在 Markdown 文件中使用 Vue 組件，支持 props、插槽和嵌套組件。
• 代碼高亮：使用支持 VS Code 主題的 Shiki 集成在網站上顯示漂亮的代碼塊。
• 隨處部署：Nuxt Content 支持靜態或節點服務器托管。

Github：https://github.com/nuxt/content