Toolset · Composition API, Pinia, Vite
Vue 3
- Vue
- TypeScript
- Vite
Vue 3 with the Composition API and script setup is our default for reactive web UIs. Pinia for state, Vite for the toolchain, and Nuxt when the app needs SSR.
Where two tools compete, the one marked our default is what we reach for.
Build & tooling
2 toolsEnvironment variables
2 toolsVite's built-in env handling is our default — expose public variables with the VITE_ prefix and keep everything else server-only. Never hardcode values.
Validate env vars at startup with a Zod schema per variable, failing fast on anything missing or malformed instead of discovering it at runtime.
State management
1 toolThe official, type-safe store — intuitive and devtools-friendly. Our default.
Data & server state
2 toolsServer-state caching and invalidation for Vue — manages caching, background refetch, loading/error states, and guards against race conditions. Use it for any data that needs caching or refetching; direct API calls are acceptable only for one-off, non-cached data where those benefits aren't needed. Our default for remote data.
A large collection of composition utilities.
Routing & HTTP
2 toolsThe official router. Our default.
HTTP clients; ofetch pairs naturally with Nuxt.
Authentication
2 toolsManaged, cross-platform auth with email/password, social providers, and magic links. Our default. Always verify tokens server-side — never trust decoded claims without verification.
Lightweight, unopinionated auth you host yourself — reach for it when you want full control over sessions and the user table.
Validation & UI
2 toolsSchema validation for inputs, env, and API boundaries — parse, don't assume. Our default.
Utility styling and unstyled accessible components.
Form handling
2 toolsSchema-driven form handling — validation, error state, and submission wiring, with direct integration for Zod validation schemas. Our default.
A more batteries-included form builder with prebuilt inputs and layouts — a simpler alternative for straightforward forms.
Testing
2 toolsUnit/component testing. Our default.
End-to-end browser testing.
Monitoring & observability
3 toolsErrors, performance, and replay for Vue and Nuxt apps. Our default.
Core Web Vitals measurement, reported to your analytics of choice.
Component tree, Pinia state, and timeline inspection in development.
Service workers (PWA)
1 toolWorkbox is our default for service-worker management; vite-plugin-pwa wires it into a Vite build with almost no config — offline support, caching strategies, and background sync. Our default for PWAs.
CI/CD
5 toolsCI for lint / test / build, then trigger the deploy. Our default CI.
Deploy previews and hosting for SPA/SSR builds — simple and effective for most Vue projects. Decision rule: start with Netlify for its simplicity; consider Vercel for edge needs, or NuxtHub when the project is Nuxt-based. Our default.
Global edge hosting with Git-connected deploys. Choose it when you need the edge network or already use Vercel for other projects.
First-class Nuxt/SSR hosting from the Nuxt team. Choose it when building with Nuxt and you want its server routes, KV, and blob storage handled for you.
Global edge hosting with Git-connected deploys; a strong edge alternative.
Linting & formatting
3 toolsBuilding on Vue 3?
We ship production Vue 3with exactly this stack. Tell us what you're building.
Start a conversation