Why I Built Solid-Vue JS: File-Based API Routing for Vue + Vite

#vue #webdev #javascript #vite

Quick note: Solid-Vue JS is not SolidJS. It's a Vue + Vite framework. Yes, the names are close, and I'm sorry for the confusion! 🙂

The itch

Vue + Vite is a fantastic frontend setup. But the moment a project needs even a small API (a form handler, a webhook, a tiny CRUD), I found myself standing up a separate server or pulling in a much bigger framework than the project needed.

The idea started with a small project: I wanted to build a mini ERP for a friend's cilok goang shop using Vue on the frontend and a vanilla JavaScript backend.

I started with plain Vue + Vite, expecting it to be straightforward. Instead, I kept running into the usual setup friction — version conflicts, Vite configuration issues, routes returning 404s, and all the little pieces that need to be wired together manually. I eventually tried Nuxt because so much of that structure is already built in, but that came with its own friction too, including issues while setting up shadcn-vue and a project scaffold that felt surprisingly slow for such a small project.

That experience made me think there should be a middle path: keep Vue + Vite as the foundation, but provide enough conventions and tooling that I don't have to rebuild the same project structure every time.

I wanted a middle path: keep Vue + Vite as the foundation, and add just enough structure for the backend side to live in the same project.

What Solid-Vue JS is

Solid-Vue JS is a meta-framework built around a custom Vite plugin. Its core idea is file-based API routing on top of h3: you create a file, and it becomes an API endpoint.

It ships as three npm packages:

solid-vue: the core framework
create-solid-vue: project scaffolding
solid-vue-cli: in-project commands for add-ons

Getting started

npm create solid-vue@latest my-app
cd my-app
npm install
npm run dev

File-based API routes

Solid-Vue JS uses conventions to keep application structure predictable. Two of these — pages and server/api — are scanned automatically by the framework. The rest are suggested patterns for organising your own code.

├── src/
│   ├── App.vue
│   ├── main.ts
│   ├── components/
│   ├── pages/           # file-based routing
│   ├── layouts/         # page layouts — see Routing
│   ├── stores/
│   └── server/
│       └── api/         # file-based routing
├── public/              # Static assets, served as-is
├── index.html
└── vite.config.ts

Add-ons from the CLI

Instead of hand-wiring config every time, add-ons install and configure themselves:

npx solid-vue add tailwind

Right now the add-ons are Tailwind CSS, Lucide icons (lucide-vue-next), and Tabler icons (@tabler/icons-vue).

Deploying

I've tested a real project end-to-end: it builds cleanly and deploys to Cloudflare Workers with wrangler. There is no Cloudflare-specific configuration required by Solid-Vue JS — deployment is handled with a single command. The only prerequisite is authenticating Wrangler with your Cloudflare account first with npx wrangler login. If you done with Wrangler Auth, you can deploy your project to Cloudflare Worker with one command: npm run deploy -- --target=cloudflare-worker.

Where it stands

Solid-Vue JS is early access / beta. The core works, the packages are on npm, and the docs are live, but I expect rough edges, and that's exactly why I'm posting this.

🌐 Landing page: https://solid-vue.tech
📚 Docs: https://docs.solid-vue.tech
💻 GitHub: https://github.com/solid-vue/solid-vue/

Some ideas I'm exploring for later (no promises or timelines): REST connectors for other backends and integrations with services like Firebase and Supabase.

DEV Community