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.
|