New modern stack for fullstack apps

#bunjs #elysia #vue #drizzle

🚀 Full Stack Reimagined: Why Bun, Elysia, Drizzle, and Vue 3 is the Modern Dev Dream

In the fast-moving world of full-stack development, we're constantly searching for the sweet spot: maximum speed paired with bulletproof type safety and an amazing developer experience (DX). If you've felt like you have to sacrifice one for the other, I've got good news.

Meet the new dream team: Bun, Elysia, Drizzle ORM, and Vue 3. This isn't just a collection of cool tools—it's a cohesive, modern stack designed to make building scalable, type-safe web applications genuinely fun and incredibly fast.

⚡ Backend: Blazing Fast and Type-Safe APIs

Our backend stack is built for performance and reliability, all powered by TypeScript.

Bun: More Than Just a Runtime

Forget Node.js for a minute. Bun is an all-in-one JavaScript and TypeScript runtime that's designed to be fast—like, mind-blowingly fast.

Speed is Native: Bun uses the JavaScriptCore engine (instead of V8), giving it a huge head start in startup and execution speed.
Built-in Tooling: It's not just a runtime; it's a bundler, a test runner, and a package manager that's significantly quicker than npm or yarn. This simplifies your toolchain immensely.
TypeScript, Out of the Box: No more fumbling with ts-node or complex setups. Bun runs .ts files natively.

Elysia: The Bun-First Framework

What happens when you pair the fastest runtime with a framework built specifically for it? You get Elysia.js.

Ultra-Performance: Elysia is engineered to be one of the fastest Node.js/Bun web frameworks, leveraging Bun's speed for minimal overhead.
End-to-End Type Safety (Like tRPC, but Better): This is the killer feature. Elysia, especially when using its OpenAPI generation and client tooling (like Eden), lets you generate a client for your Vue 3 frontend that ensures your API calls are type-checked from server to client. You modify a route on the backend, and your frontend instantly knows. No more runtime surprises!
"Just a Function" Ergonomics: Defining routes, middleware, and plugins is incredibly clean and intuitive, often feeling like you're just writing simple functions.

Drizzle ORM: The Modern SQL King

We're moving beyond traditional, heavy ORMs and embracing the power of modern SQL. Drizzle ORM is a game-changer here.

Closer to SQL: Drizzle focuses on being a lightweight, performant wrapper that keeps you close to the SQL you know and love. When you need to, you can drop into raw SQL seamlessly.
Type-Safe Queries: This is where Drizzle shines. Your database schema is defined in code, and Drizzle uses that to ensure your queries are correct at compile time. Say goodbye to typos in column names or mismatched types—TypeScript catches it all before you even run the server.
Easy Migrations: With Drizzle Kit, managing database migrations and pushing schema changes (bun db:push or bun db:migrate) is a simple, command-line operation that stays in sync with your type-safe schema.

✨ Frontend: Vue 3, Pinia, and TailwindCSS

On the client side, we focus on a highly reactive, well-structured, and beautiful UI.

Vue 3 with Composition API: Vue 3 gives us a modern, performant, and flexible reactive system. The Composition API provides a fantastic way to organize and reuse logic, especially when working with TypeScript.
Pinia for State Management: Pinia is the de-facto standard for Vue state management. It’s lightweight, modular, and—you guessed it—comes with excellent TypeScript support right out of the box, making state predictable and easy to manage.
TailwindCSS: For styling, we use the utility-first CSS framework that makes building complex, responsive UIs a breeze without ever leaving your component files.

🤝 The Synergy: Why This Stack Wins

The true power of this stack is in its synergy. It's built for consistency and velocity:

Unified TypeScript: You are writing TypeScript on the backend, in the ORM, and on the frontend. This reduces context switching and maximizes developer productivity.
End-to-End Type Safety: The Elysia/Drizzle ORM combination on the backend and the generated client on the frontend means your data flows from the PostgreSQL database, through your API, and into your Vue components all with type validation.
Fast Feedback Loop: Bun's hot-reload and fast runtime, combined with Vue's reactivity and Vite's build speed (used under the hood for Vue development), means you see your changes almost instantly.

This is a stack that is all about speed—development speed and application performance.

If you're looking to build your next scalable, modern, and high-performance full-stack application, stop looking back at older, slower stacks. Dive into this combination of Bun, Elysia, Drizzle, and Vue 3. Your developer experience—and your users—will thank you.

Ready to go template: https://github.com/isbik/vue-bue-elysia-template

Top comments (1)

Dmitry Bikishov • Nov 8

What do you think?