Use when running Nuxt 3 with Bun runtime, building Vue/Nuxt apps with Bun, or configuring Nuxt projects to use Bun for development and production.
Runs Nuxt 3 applications with Bun for faster development and production.
/plugin marketplace add secondsky/claude-skills/plugin install bun@claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Run Nuxt 3 applications with Bun for faster development.
# Create new Nuxt project
bunx nuxi@latest init my-app
cd my-app
# Install dependencies
bun install
# Development
bun run dev
# Build
bun run build
# Preview production
bun run preview
{
"scripts": {
"dev": "nuxt dev",
"build": "nuxt build",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"nuxt": "^4.0.0",
"vue": "^3.5.0"
}
}
{
"scripts": {
"dev": "bun --bun nuxt dev",
"build": "bun --bun nuxt build",
"preview": "bun --bun .output/server/index.mjs"
}
}
export default defineNuxtConfig({
// Enable SSR
ssr: true,
// Nitro configuration
nitro: {
// Use Bun preset
preset: "bun",
// External packages
externals: {
external: ["bun:sqlite"],
},
},
// Development
devServer: {
port: 3000,
},
// Modules
modules: ["@nuxt/ui", "@pinia/nuxt"],
});
// server/api/users.ts
import { Database } from "bun:sqlite";
export default defineEventHandler(async (event) => {
const db = new Database("data.sqlite");
const users = db.query("SELECT * FROM users").all();
db.close();
return users;
});
// server/middleware/auth.ts
export default defineEventHandler(async (event) => {
const token = getHeader(event, "Authorization");
if (!token && event.path.startsWith("/api/protected")) {
throw createError({
statusCode: 401,
message: "Unauthorized",
});
}
});
// server/api/files/[name].ts
export default defineEventHandler(async (event) => {
const name = getRouterParam(event, "name");
const file = Bun.file(`./data/${name}`);
if (!(await file.exists())) {
throw createError({
statusCode: 404,
message: "File not found",
});
}
return file.text();
});
<script setup lang="ts">
// Fetches from server/api/users.ts
const { data: users, pending, error } = await useFetch("/api/users");
</script>
<template>
<div v-if="pending">Loading...</div>
<div v-else-if="error">Error: {{ error.message }}</div>
<ul v-else>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</template>
// composables/useDatabase.ts
export const useDatabase = () => {
// Only runs on server
if (process.server) {
const { Database } = require("bun:sqlite");
return new Database("data.sqlite");
}
return null;
};
// server/api/users.post.ts
export default defineEventHandler(async (event) => {
// Read body
const body = await readBody(event);
// Get query params
const query = getQuery(event);
// Get headers
const auth = getHeader(event, "Authorization");
// Get cookies
const session = getCookie(event, "session");
// Set cookie
setCookie(event, "visited", "true", {
httpOnly: true,
maxAge: 60 * 60 * 24,
});
return { success: true };
});
// server/utils/db.ts
import { Database } from "bun:sqlite";
let db: Database | null = null;
export function getDb() {
if (!db) {
db = new Database("data.sqlite");
db.run(`
CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY,
name TEXT NOT NULL
)
`);
}
return db;
}
// server/api/users.ts
export default defineEventHandler(() => {
const db = getDb();
return db.query("SELECT * FROM users").all();
});
// server/plugins/database.ts
export default defineNitroPlugin((nitroApp) => {
// Initialize on startup
console.log("Database initialized");
// Cleanup on shutdown
nitroApp.hooks.hook("close", () => {
console.log("Closing database");
});
});
// server/tasks/cleanup.ts
export default defineTask({
meta: {
name: "cleanup",
description: "Clean old data",
},
run() {
const db = getDb();
db.run("DELETE FROM logs WHERE created_at < ?", [
Date.now() - 7 * 24 * 60 * 60 * 1000,
]);
return { result: "Cleaned" };
},
});
# Build with Bun preset
NITRO_PRESET=bun bun run build
# Run production server
bun .output/server/index.mjs
FROM oven/bun:1 AS builder
WORKDIR /app
COPY package.json bun.lockb ./
RUN bun install --frozen-lockfile
COPY . .
RUN bun run build
FROM oven/bun:1
WORKDIR /app
COPY --from=builder /app/.output /app/.output
EXPOSE 3000
CMD ["bun", ".output/server/index.mjs"]
# .env
NUXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=./data.sqlite
// Access in code
const config = useRuntimeConfig();
console.log(config.public.apiUrl);
console.log(config.databaseUrl); // Server only
// nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
databaseUrl: "",
public: {
apiUrl: "",
},
},
});
| Error | Cause | Fix |
|---|---|---|
Cannot find bun:sqlite | Wrong preset | Set nitro.preset: "bun" |
Module parse failed | Build issue | Clear .nuxt and rebuild |
Hydration mismatch | Server/client diff | Check async data |
EADDRINUSE | Port in use | Change port or kill process |
Load references/nitro.md when:
Load references/deployment.md when:
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.