DEV Community

Cover image for Solid-Vue | The Minimalist Vue + Vite Web Frameworks (No relation to SolidJS or SolidStart at all)
Joni Ilman Pahmi
Joni Ilman Pahmi

Posted on

Solid-Vue | The Minimalist Vue + Vite Web Frameworks (No relation to SolidJS or SolidStart at all)

#javascript #showdev #vue #fullstack

Solid-Vue is a lightweight Vue + Vite framework for small and growing businesses. File-based routing, a built-in server layer powered by h3, and zero extra config to wire together.

Features

  • File-based routing — every file in src/pages becomes a route automatically, via unplugin-vue-router.
  • A server, built in — src/server/api holds your API endpoints, served through h3 alongside your frontend. One dev server, one deploy.
  • Vite underneath — instant startup and near-instant HMR.
  • State management ready — Pinia is wired in out of the box.
  • Extensible via add-ons — install Tailwind CSS, icon sets, form validation, i18n, and more with the companion solid-vue-cli.

Quick start

Don't install this package directly — scaffold a new project instead:

npm create solid-vue@latest my-app
cd my-app
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Usage

vite.config.ts

import { defineConfig } from 'vite'
import { solidVue } from 'solid-vue'

export default defineConfig({
  plugins: [
    solidVue({ mode: 'spa' })
  ]
})
Enter fullscreen mode Exit fullscreen mode

src/main.ts

import { createSolidApp } from 'solid-vue/client'
import App from './App.vue'

const { app, router } = createSolidApp(App)

router.isReady().then(() => {
  app.mount('#app')
})
Enter fullscreen mode Exit fullscreen mode

src/server/api/hello.ts

import { defineEventHandler } from 'solid-vue/server'

export default defineEventHandler(() => {
  return { message: 'Hello from Solid-Vue!' }
})
Enter fullscreen mode Exit fullscreen mode

Plugin options 

solidVue({
  mode: 'spa',        // 'spa' | 'ssr' | 'ssg' — default: 'spa'
  apiPrefix: '/api',  // prefix for file-based API routes — default: '/api'
  optimizeCWV: true,  // inject Core Web Vitals meta/preconnect tags — default: true
})
Enter fullscreen mode Exit fullscreen mode

Package exports

Entry Use
solid-vue The Vite plugin (solidVue), used in vite.config.ts
solid-vue/client createSolidApp() — bootstraps Vue, Vue Router, and Pinia
solid-vue/server Re-exported h3 utilities (defineEventHandler, readBody, useSession, etc.) for your API routes

Add-ons

Add optional integrations to an existing project with the CLI:

npx solid-vue add tailwind
npx solid-vue add pinia
npx solid-vue add vitest
npx solid-vue add auth
npx solid-vue add i18n
npx solid-vue add lint
npx solid-vue add tabler
npx solid-vue add lucide
npx solid-vue add ofetch
npx solid-vue add unhead
npx solid-vue add vee-validate
npx solid-vue add vueuse
Enter fullscreen mode Exit fullscreen mode

Requirements

  • Node.js 22+
  • Vue ^3.4, Vue Router ^4, Pinia ^2, Vite ^8, @vitejs/plugin-vue ^6 (installed as peer dependencies)

License

MIT

Join Early Access Programme

Solid-Vue is currently in its early access phase. We're early, and there's plenty still to build — but we'd love for you to try it and tell us what's missing. We'd be absolutely chuffed if you could test it out and share your thoughts.

You can give your review, feedback and contributing on our project by following link:
Our Page: https://solid-vue.tech/
NPMJS: https://www.npmjs.com/~joniilmanfahmi00-collab
GitHub: https://github.com/solid-vue/solid-vue

Top comments (0)