<< All versions
Skill v1.0.1
currentAutomated scan100/100secondsky/claude-skills/bun-nuxt
3 files
──Details
PublishedMay 24, 2026 at 03:25 PM
Content Hashsha256:0ea27541baafaca6...
Git SHA5e92b7170451
Bump Typepatch
──Files
Files (1 file, 6.7 KB)
SKILL.md6.7 KBactive
SKILL.md · 365 lines · 6.7 KB
version: "1.0.1" name: bun-nuxt description: 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. license: MIT
Bun Nuxt
Run Nuxt 3 applications with Bun for faster development.
Quick Start
bash
# Create new Nuxt projectbunx nuxi@latest init my-appcd my-app# Install dependenciesbun install# Developmentbun run dev# Buildbun run build# Preview productionbun run preview
Secure Installation
Scaffolding tools like bunx nuxi init download and execute remote code. Before running, follow supply chain security best practices:
- Block post-install scripts — Bun disables them by default; allow specific packages via
trustedDependenciesinpackage.json - Cooldown period — Configure
minimumReleaseAgeinbunfig.tomlto wait 7 days for new versions - Audit before installing — Run
socket package score npm <pkg>or usesocket npm install <pkg>to check packages
Load the dependency-upgrade skill for full security configuration including Socket CLI integration, cooldown setup, lockfile validation, and CI enforcement.
Project Setup
package.json
json
{"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"}}
Use Bun Runtime
json
{"scripts": {"dev": "bun --bun nuxt dev","build": "bun --bun nuxt build","preview": "bun --bun .output/server/index.mjs"}}
Configuration
nuxt.config.ts
typescript
export default defineNuxtConfig({// Enable SSRssr: true,// Nitro configurationnitro: {// Use Bun presetpreset: "bun",// External packagesexternals: {external: ["bun:sqlite"],},},// DevelopmentdevServer: {port: 3000,},// Modulesmodules: ["@nuxt/ui", "@pinia/nuxt"],});
Using Bun APIs
Server Routes
typescript
// server/api/users.tsimport { 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
typescript
// server/middleware/auth.tsexport default defineEventHandler(async (event) => {const token = getHeader(event, "Authorization");if (!token && event.path.startsWith("/api/protected")) {throw createError({statusCode: 401,message: "Unauthorized",});}});
File Operations
typescript
// server/api/files/[name].tsexport 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();});
Composables
useFetch with Server Data
vue
<script setup lang="ts">// Fetches from server/api/users.tsconst { 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>
Server-Only Composables
typescript
// composables/useDatabase.tsexport const useDatabase = () => {// Only runs on serverif (process.server) {const { Database } = require("bun:sqlite");return new Database("data.sqlite");}return null;};
Server Utilities
H3 Event Handling
typescript
// server/api/users.post.tsexport default defineEventHandler(async (event) => {// Read bodyconst body = await readBody(event);// Get query paramsconst query = getQuery(event);// Get headersconst auth = getHeader(event, "Authorization");// Get cookiesconst session = getCookie(event, "session");// Set cookiesetCookie(event, "visited", "true", {httpOnly: true,maxAge: 60 * 60 * 24,});return { success: true };});
Database Utility
typescript
// server/utils/db.tsimport { 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;}
typescript
// server/api/users.tsexport default defineEventHandler(() => {const db = getDb();return db.query("SELECT * FROM users").all();});
Nitro Features
Server Plugins
typescript
// server/plugins/database.tsexport default defineNitroPlugin((nitroApp) => {// Initialize on startupconsole.log("Database initialized");// Cleanup on shutdownnitroApp.hooks.hook("close", () => {console.log("Closing database");});});
Scheduled Tasks
typescript
// server/tasks/cleanup.tsexport 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" };},});
Deployment
Build for Bun
bash
# Build with Bun presetNITRO_PRESET=bun bun run build# Run production serverbun .output/server/index.mjs
Docker
dockerfile
FROM oven/bun:1 AS builderWORKDIR /appCOPY package.json bun.lockb ./RUN bun install --frozen-lockfileCOPY . .RUN bun run buildFROM oven/bun:1WORKDIR /appCOPY --from=builder /app/.output /app/.outputEXPOSE 3000CMD ["bun", ".output/server/index.mjs"]
Environment Variables
bash
# .envNUXT_PUBLIC_API_URL=https://api.example.comDATABASE_URL=./data.sqlite
typescript
// Access in codeconst config = useRuntimeConfig();console.log(config.public.apiUrl);console.log(config.databaseUrl); // Server only
typescript
// nuxt.config.tsexport default defineNuxtConfig({runtimeConfig: {databaseUrl: "",public: {apiUrl: "",},},});
Common Errors
| 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 |
When to Load References
Load references/nitro.md when:
- Advanced Nitro configuration
- Storage drivers
- Cache handlers
Load references/deployment.md when:
- Edge deployment
- Cloudflare Workers
- Vercel/Netlify