> ## Documentation Index
> Fetch the complete documentation index at: https://bun.zhcndoc.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 使用 Nuxt 和 Bun 构建应用

Bun 开箱即支持 [Nuxt](https://nuxt.com)。使用官方的 `nuxi` CLI 初始化 Nuxt 应用。

```sh terminal icon="terminal" theme={"theme":{"light":"github-light","dark":"dracula"}}
bunx nuxi init my-nuxt-app
```

```txt theme={"theme":{"light":"github-light","dark":"dracula"}}
✔ 您想使用哪个包管理器？
bun
◐ 正在安装依赖...
bun install v1.3.3 (16b4bf34)
 + @nuxt/devtools@0.8.2
 + nuxt@3.7.0
 785 个包已安装 [2.67秒]
✔ 安装完成。
✔ 类型已生成于 .nuxt
✨ Nuxt 项目已使用 v3 模板创建。下一步：
 › cd my-nuxt-app
 › 使用 bun run dev 启动开发服务器
```

***

要启动开发服务器，请在项目根目录运行 `bun --bun run dev`。这将运行 `nuxt dev` 命令（在 `package.json` 的 `"dev"` 脚本中定义）。

<Note>
  `nuxt` CLI 默认使用 Node.js；传入 `--bun` 参数则强制开发服务器使用 Bun 运行时。
</Note>

```sh terminal icon="terminal" theme={"theme":{"light":"github-light","dark":"dracula"}}
cd my-nuxt-app
bun --bun run dev
```

```txt theme={"theme":{"light":"github-light","dark":"dracula"}}
nuxt dev
Nuxi 3.6.5
Nuxt 3.6.5 搭配 Nitro 2.5.2
  > 本地:    http://localhost:3000/
  > 网络:    http://192.168.0.21:3000/
  > 网络:    http://[fd8a:d31d:481c:4883:1c64:3d90:9f83:d8a2]:3000/

✔ Nuxt DevTools 已启用 v0.8.0（实验性）
ℹ Vite 客户端预热 547 毫秒
✔ Nitro 构建完成 244 毫秒
```

***

开发服务器启动后，打开 [http://localhost:3000](http://localhost:3000) 查看应用。应用将渲染 Nuxt 内置的 `NuxtWelcome` 模板组件。

开始开发你的应用时，可将 `app.vue` 中的 `<NuxtWelcome />` 替换为你自己的 UI。

<Frame>
  ![示例 Nuxt 应用运行在本地](https://github.com/oven-sh/bun/assets/3084745/2c683ecc-3298-4bb0-b8c0-cf4cfaea1daa)
</Frame>

***

生产构建时，虽然默认预设已兼容 Bun，你也可以使用 [Bun 预设](https://nitro.build/deploy/runtimes/bun) 来生成更优优化的构建。

```ts nuxt.config.ts icon="https://mintcdn.com/bun-zhcndoc/cnUTwgMuf4cCrwC-/icons/typescript.svg?fit=max&auto=format&n=cnUTwgMuf4cCrwC-&q=85&s=e7767043c9e885c34f2d6c8fe2a95217" theme={"theme":{"light":"github-light","dark":"dracula"}}
export default defineNuxtConfig({
  nitro: {
    preset: "bun", // [!code ++]
  },
});
```

或者，你也可以通过环境变量设置预设：

```sh terminal icon="terminal" theme={"theme":{"light":"github-light","dark":"dracula"}}
NITRO_PRESET=bun bun run build
```

<Note>
  有些包提供针对 Bun 的特定导出，Nitro 使用默认预设时不会正确打包这些导出。在这种情况下，你需要使用 Bun 预设，确保这些包在生产构建中能正常工作。
</Note>

使用 bun 构建完成后，运行：

```sh terminal icon="terminal" theme={"theme":{"light":"github-light","dark":"dracula"}}
bun run ./.output/server/index.mjs
```

***

完整文档请参阅 [Nuxt 官网](https://nuxt.com/docs)。