Nuxt (入門)

介紹

概述

Nuxt.js 是基於 Vue.js 的應用框架，專門用來開發伺服器端渲染（SSR）或靜態生成（SSG）的 Vue 應用。
它提供了更好的 SEO、效能最佳化，以及更方便的專案結構，讓開發大型 Vue 應用變得更簡單。

功能 說明
🔄 SSR（伺服器端渲染） 頁面在伺服器上先渲染再送給瀏覽器，有利 SEO 和初次載入速度
🚀 靜態網站生成（SSG） 可預先編譯成 HTML，在 CDN 上快速部署
🗂️ 檔案式路由 自動依照 pages/ 資料夾產生路由，免設定 vue-router
🧩 自動引入元件 放在 components/ 的元件可以自動引入
📦 模組系統 一行就能加入 Tailwind、Axios、PWA、Auth 等功能
🔧 整合 Vue/Pinia/Vuex 與 Vue 生態系整合，開箱即用

特點

  • 伺服器端渲染（SSR）：Nuxt 內建支援 SSR，可提升 SEO 與首屏載入速度。
  • 靜態網站生成（SSG）：可預先生成 HTML，提高效能與安全性。
  • 檔案式路由：pages/ 目錄內的檔案自動轉為路由。
  • 組件自動導入：components/ 內的組件可直接使用，免手動引入。
  • 內建 Pinia（Nuxt 3）：取代 Vuex 作為狀態管理工具。
  • 中介層（Middleware）：可用於身份驗證、權限檢查等前置邏輯。
  • API 路由（Nuxt Server API）：在 server/api/ 目錄中撰寫 API，無需額外後端伺服器。

Nuxt 版本比較

版本 特點
Nuxt 2 基於 Vue 2，使用 Vuex，支援 SSR 與 SSG
Nuxt 3 基於 Vue 3，內建 Pinia，使用 Nitro 作為伺服器引擎，更快更輕量

安裝

# 建立 Nuxt 3 專案
npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev

⚠️ create-nuxt-app 工具主要用於 Nuxt 2，Nuxt 3 官方建議使用 nuxi 工具建立專案。

專案架構

my-nuxt-app/
├── assets/          # 靜態資源，如圖片、樣式
├── components/      # Vue 組件
├── layouts/         # 自定義頁面佈局
├── pages/           # 檔案式路由
├── plugins/         # 擴展功能，如 Axios 設定等
├── public/          # 公開靜態檔案（Nuxt 3）
├── server/          # Nuxt 3 用於撰寫 API、middleware
│   └── api/         # API 路由
├── stores/          # Pinia 狀態管理
├── nuxt.config.ts   # Nuxt 設定檔（支援 TypeScript）
├── package.json     # npm 設定

nuxt.config.ts 基本設定範例

export default defineNuxtConfig({
  css: ['~/assets/styles.css'],
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: 'https://api.example.com',
  },
  plugins: ['~/plugins/api.ts'],
});

路由機制

Nuxt 透過 pages/ 資料夾自動產生路由：

<!-- pages/index.vue -->
<template>
  <div>
    <h1>首頁</h1>
    <NuxtLink to="/about">關於我們</NuxtLink>
  </div>
</template>

<!-- pages/about.vue -->
<template>
  <div>
    <h1>關於我們</h1>
    <NuxtLink to="/">回首頁</NuxtLink>
  </div>
</template>

使用 services 呼叫 API

// services/api.ts
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com/',
  headers: {
    'Content-Type': 'application/json',
  },
});

export const getCourses = async () => {
  const res = await apiClient.get('/courses');
  return res.data;
};

export const getCourseById = async (id: string) => {
  const res = await apiClient.get(`/courses/${id}`);
  return res.data;
};

在頁面組件中使用：

<!-- pages/courses.vue -->
<template>
  <div>
    <h1>Courses</h1>
    <ul>
      <li v-for="course in courses" :key="course.id">{{ course.name }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getCourses } from '~/services/api';

const courses = ref([]);

onMounted(async () => {
  courses.value = await getCourses();
});
</script>

註冊全域 API 插件

// plugins/api.ts
import { getCourses, getCourseById } from '~/services/api';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide('api', {
    getCourses,
    getCourseById,
  });
});

在組件中使用：

<script setup lang="ts">
const { $api } = useNuxtApp();
const courses = await $api.getCourses();
</script>

Nuxt vs Vue 傳統 SPA 比較

特點 Vue 傳統 SPA Nuxt.js
SEO ❌ 不支援 SSR，需額外設定 ✅ 預設支援 SSR
頁面載入速度 ❌ 初次需等待 JS 載入 ✅ SSR / SSG 可預渲染
路由管理 ✅ 手動設定 Vue Router ✅ 自動依據 pages/ 產生
組件導入 ✅ 手動 import ✅ 自動導入
API 整合 ❌ 需額外搭建後端 ✅ 內建 server/api 功能

適合使用 Nuxt 的情境

  • 有 SEO 最佳化需求（如部落格、電商）
  • 想提升首屏載入速度
  • 需要整合 API，避免另外維護後端
  • 想要快速開發（自動路由、自動導入）