使用 Nuxt 和 Bun 建置應用

Bun 無需額外設定即可支援 Nuxt。使用官方的 create-nuxt CLI 初始化 Nuxt 應用。

terminal

bun create nuxt@latest my-nuxt-app

Text

┌  Welcome to Nuxt!
│
◇  Templates loaded
│
◇  Which template would you like to use?
│  minimal – Minimal starter with a single app.vue.
│
◇  Creating project in my-nuxt-app
│
◇  Downloaded minimal template
│
◇  Which package manager would you like to use?
│  bun
│
◇  Initialize git repository?
│  Yes
│
◇  Dependencies installed
│
◇  Git repository initialized
│
◇  Would you like to browse and install modules?
│  No
│
└  ✨ Nuxt project has been created with the minimal template.

╭── 👉 Next steps ─────╮
│                      │
│   › cd my-nuxt-app   │
│   › bun run dev      │
│                      │
╰──────────────────────╯

要啟動開發伺服器，請在專案根目錄中執行 bun --bun run dev。此命令會執行 package.json 中 "dev" 指令碼所定義的 nuxt dev 命令。

terminal

cd my-nuxt-app
bun --bun run dev

Text

$ nuxt dev
│
●  Nuxt 4.5.2 (with Nitro 2.13.4, Vite 8.2.1 and Vue 3.5.41)

  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Alt + D in the browser (v3.4.1)

✔ Vite client built in 95ms
✔ Vite server built in 33ms
[nitro] ✔ Nuxt Nitro server built in 948ms
ℹ Vite server warmed up in 3ms
ℹ Vite client warmed up in 9ms

開發伺服器啟動後，開啟 http://localhost:3000 即可檢視應用。該應用會渲染 Nuxt 內建的 NuxtWelcome 模板元件。

要開始開發應用，請將 app/app.vue 中的 <NuxtWelcome /> 替換為你自己的 UI。

對於生產環境建置，預設預設與 Bun 相容，但 Bun 預設可以生成經過更好最佳化的建置結果。

nuxt.config.ts

export default defineNuxtConfig({
  nitro: {
    preset: "bun", // [!code ++]
  },
});

或者，也可以使用環境變數設定預設：

terminal

NITRO_PRESET=bun bun run build

建置完成後，啟動伺服器：

terminal

bun run ./.output/server/index.mjs

完整文件請參閱 Nuxt 官網。