npx skills add https://github.com/secondsky/claude-skills --skill 'Bun Nuxt'使用 Bun 运行 Nuxt 3 应用程序以获得更快的开发体验。
# 创建新的 Nuxt 项目
bunx nuxi@latest init my-app
cd my-app
# 安装依赖
bun install
# 开发模式
bun run dev
# 构建
bun run build
# 预览生产版本
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({
// 启用 SSR
ssr: true,
// Nitro 配置
nitro: {
// 使用 Bun 预设
preset: "bun",
// 外部包
externals: {
external: ["bun:sqlite"],
},
},
// 开发服务器
devServer: {
port: 3000,
},
// 模块
modules: ["@nuxt/ui", "@pinia/nuxt"],
});
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
// 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: "未授权",
});
}
});
// 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: "文件未找到",
});
}
return file.text();
});
<script setup lang="ts">
// 从 server/api/users.ts 获取数据
const { data: users, pending, error } = await useFetch("/api/users");
</script>
<template>
<div v-if="pending">加载中...</div>
<div v-else-if="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 = () => {
// 仅在服务器端运行
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) => {
// 读取请求体
const body = await readBody(event);
// 获取查询参数
const query = getQuery(event);
// 获取请求头
const auth = getHeader(event, "Authorization");
// 获取 Cookie
const session = getCookie(event, "session");
// 设置 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) => {
// 启动时初始化
console.log("数据库已初始化");
// 关闭时清理
nitroApp.hooks.hook("close", () => {
console.log("正在关闭数据库");
});
});
// server/tasks/cleanup.ts
export default defineTask({
meta: {
name: "cleanup",
description: "清理旧数据",
},
run() {
const db = getDb();
db.run("DELETE FROM logs WHERE created_at < ?", [
Date.now() - 7 * 24 * 60 * 60 * 1000,
]);
return { result: "已清理" };
},
});
# 使用 Bun 预设构建
NITRO_PRESET=bun bun run build
# 运行生产服务器
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
// 在代码中访问
const config = useRuntimeConfig();
console.log(config.public.apiUrl);
console.log(config.databaseUrl); // 仅服务器端
// nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
databaseUrl: "",
public: {
apiUrl: "",
},
},
});
| 错误 | 原因 | 解决方案 |
|---|---|---|
Cannot find bun:sqlite | 预设错误 | 设置 nitro.preset: "bun" |
Module parse failed | 构建问题 | 清除 .nuxt 并重新构建 |
Hydration mismatch | 服务器/客户端差异 | 检查异步数据 |
EADDRINUSE | 端口被占用 | 更改端口或终止进程 |
在以下情况加载 references/nitro.md:
在以下情况加载 references/deployment.md:
每周安装量
–
代码仓库
GitHub 星标数
93
首次出现时间
–
安全审计
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 |
Load references/nitro.md when:
Load references/deployment.md when:
Weekly Installs
–
Repository
GitHub Stars
93
First Seen
–
Security Audits
Vue.js测试最佳实践:Vue 3组件、组合式函数、Pinia与异步测试完整指南
3,800 周安装
| Change port or kill process |