我們已經知道，Nuxt 是一個全端框架，有前端的 Vue App，也有後端的 Nitro 伺服器。但有時候，我們會有一個函式或型別，希望在前端和後端都能使用。例如，一個用來驗證使用者輸入格式的函式。

shared/ 資料夾就是為了這個目的而生的。

1. 「中立國」原則

您可以把 shared/ 資料夾想像成是一個中立國或共享的工具箱。放在裡面的程式碼，必須保持中立，不能偏袒任何一方。

這意味著 shared/ 裡面的程式碼有一條黃金定律：

黃金定律

不可以 import 任何 Vue 的東西（例如 ref, defineComponent），也不可以 import 任何 Nitro 伺服器專屬的東西（例如 defineEventHandler）。它必須是純粹的 JavaScript / TypeScript。

2. `utils` 與 `types` 的自動魔法

Nuxt 對 shared/ 內的兩個子資料夾有特別的魔法：

shared/utils/

放在這裡的工具函式會被自動匯入到您的整個應用程式中（前端和後端都可用）。

shared/types/

放在這裡的 TypeScript 型別定義也會被自動全域載入。

3. 實戰演練

讓我們來建立一個 capitalize 函式，它能將字串的第一個字母轉為大寫。我們希望在 Vue 元件和 Server API 中都能使用它。

第一步：建立共享的工具函式

建立檔案 shared/utils/capitalize.ts

shared/utils/capitalize.ts

// shared/utils/capitalize.ts
export const capitalize = (s: string) => {
  return s.charAt(0).toUpperCase() + s.slice(1);
}

第二步：在前端 Vue 元件中使用

因為是放在 shared/utils/，所以 capitalize 函式會被自動匯入，我們可以直接使用。

Vue 元件中

<template>
  <p>{{ capitalize('hello from vue') }}</p>
</template>

第三步：在後端 Server API 中使用

同樣地，在後端也可以直接使用，不需要 import。

server/api/test.get.ts

// server/api/test.get.ts
export default defineEventHandler(() => {
  return {
    message: capitalize('hello from server')
  };
  // API 會回傳 { "message": "Hello from server" }
});

今日總結

shared/ 資料夾是 Nuxt 提供的一個絕佳工具，用來解決前後端程式碼複用的問題，讓您的專案保持乾爽 (Don't Repeat Yourself, DRY)。

必須保持「中立」，不能使用 Vue 或 Nitro 專屬的功能。

shared/utils/ 中的函式會自動匯入到前後端。

shared/types/ 中的型別定義會自動全域載入。

適合放置驗證函式、格式化工具、共用常數等純 JS/TS 程式碼。

最佳實踐

只要記得它「中立」的黃金原則，並善用 shared/utils/ 和 shared/types/ 的自動匯入魔法，您就能更優雅地組織您的全端專案。