121 lines
3.0 KiB
Plaintext
121 lines
3.0 KiB
Plaintext
---
|
||
title: Build an app with Nuxt and Bun
|
||
sidebarTitle: Nuxt with Bun
|
||
mode: center
|
||
---
|
||
|
||
Bun supports [Nuxt](https://nuxt.com) with no extra configuration. Initialize a Nuxt app with the official `create-nuxt` CLI.
|
||
|
||
```sh terminal icon="terminal"
|
||
bun create nuxt@latest my-nuxt-app
|
||
```
|
||
|
||
```txt
|
||
┌ 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 │
|
||
│ │
|
||
╰──────────────────────╯
|
||
```
|
||
|
||
---
|
||
|
||
To start the dev server, run `bun --bun run dev` from the project root. This executes the `nuxt dev` command defined in the `"dev"` script in `package.json`.
|
||
|
||
<Note>
|
||
The `nuxt` CLI uses Node.js by default; passing the `--bun` flag forces the dev server to use the Bun runtime instead.
|
||
</Note>
|
||
|
||
```sh terminal icon="terminal"
|
||
cd my-nuxt-app
|
||
bun --bun run dev
|
||
```
|
||
|
||
```txt
|
||
$ 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
|
||
```
|
||
|
||
---
|
||
|
||
Once the dev server starts, open [http://localhost:3000](http://localhost:3000) to see the app. It renders Nuxt's built-in `NuxtWelcome` template component.
|
||
|
||
To start developing your app, replace `<NuxtWelcome />` in `app/app.vue` with your own UI.
|
||
|
||
<Frame>
|
||
|
||
</Frame>
|
||
|
||
---
|
||
|
||
For production builds, the default preset is compatible with Bun, but the [Bun preset](https://nitro.build/deploy/runtimes/bun) generates better optimized builds.
|
||
|
||
```ts nuxt.config.ts icon="/icons/typescript.svg"
|
||
export default defineNuxtConfig({
|
||
nitro: {
|
||
preset: "bun", // [!code ++]
|
||
},
|
||
});
|
||
```
|
||
|
||
Alternatively, set the preset with an environment variable:
|
||
|
||
```sh terminal icon="terminal"
|
||
NITRO_PRESET=bun bun run build
|
||
```
|
||
|
||
<Note>
|
||
Some packages provide Bun-specific exports that Nitro does not bundle correctly with the default preset. Use the Bun
|
||
preset so those packages work in production builds.
|
||
</Note>
|
||
|
||
After building, start the server:
|
||
|
||
```sh terminal icon="terminal"
|
||
bun run ./.output/server/index.mjs
|
||
```
|
||
|
||
---
|
||
|
||
Refer to the [Nuxt website](https://nuxt.com/docs) for complete documentation.
|