VU-01
Vue 3 SPAs
Single-page applications built with Vue 3, Vue Router, Pinia, and Vite — typed end-to-end and structured for long-term maintenance.
Vue 3Vue RouterPinia
Sheet · Vue
Technology · Vue Development
Vue 3, at the framework level.
Vue 3 single-page apps, embedded widgets, internal tools, and design systems. Composition API, Pinia, TypeScript, and the ergonomics that make Vue worth shipping.
Sheet 01 · Overview
Vue when the architecture deserves it — not just by default.
Vue is one of the easier frameworks to start with and one of the harder ones to scale well. The reactive system, the SFC model, and the Composition API give you tremendous leverage — and tremendous footguns if structure is loose.
We have shipped Vue applications across SaaS dashboards, ecommerce admin panels, embedded widgets, and design systems. Pinia for state. Composables for cross-cutting logic. TypeScript everywhere. Vite for builds.
For SSR and routing-heavy apps, we usually reach for Nuxt. For pure SPAs, embedded contexts, or internal tools — plain Vue 3 with Vue Router and Vite is the right floor.
Sheet 02 · Schedule of Capabilities
Capabilities delivered.
6 core areas
Scoped per brief
Scoped per brief
VU-02
Embedded Widgets
Vue components compiled as self-contained widgets for embedding in third-party sites, CMS pages, or partner integrations.
WidgetsWeb Components
VU-03
Design Systems
Token-driven Vue component libraries — documented, versioned, and consumed across multiple applications.
Design SystemsTokens
VU-04
Vue 2 → 3 Migration
Options API codebases migrated to Composition API with Pinia. Component by component, with shared adapters during transition.
MigrationVue 2
VU-05
Composables & Patterns
Cross-cutting logic extracted into composables. Custom hook patterns for fetching, auth, modals, forms, and animation.
ComposablesPatterns
VU-06
Testing
Vitest plus @vue/test-utils for component tests; Playwright for E2E. Type-safe testing utilities baked into the codebase.
VitestPlaywright
Sheet 03 · Process
How we build with Vue.
- Phase 01
Architecture
Component boundaries, store strategy, routing structure, and TypeScript surface mapped before implementation.
- Phase 02
Build
Components from primitive up. Composables extracted when patterns repeat. Pinia stores only when state is genuinely app-wide.
- Phase 03
Deploy
Vite build, CI typecheck and tests, deployed to DigitalOcean, Vercel, Cloudflare Pages, or wherever the host environment fits.
- Phase 04
Operate
Retained development — component additions, refactors, minor version upgrades, and library evolution.
Sheet 04 · Stack
Tools we reach for.
Vue 3Composition APIVue RouterPiniaTypeScriptViteTailwind CSSVueUseVitest@vue/test-utilsPlaywrightGSAP
Sheet 05 · FAQ
Questions, answered.
Vue 2 or Vue 3?
Vue 3 with the Composition API, Pinia, and TypeScript is the default. We still maintain Vue 2 codebases for clients who have not migrated, but new builds are Vue 3.
When use Vue without Nuxt?
SPAs that do not need SSR, embedded widgets, micro-frontends, internal admin tools, and projects where Vite plus Vue Router is enough. Nuxt is best when SSR, routing conventions, or auto-imports add real value.
What state management library?
Pinia. Vuex only when maintaining legacy codebases. We avoid global state that does not need to be global — composables cover most state needs cleanly.
How do you handle TypeScript in Vue?
Strict TS everywhere — components, composables, stores, API clients. <script setup lang="ts"> is the norm. Props are typed via defineProps generics; events via defineEmits generics.
Component library or build from scratch?
Depends on the engagement. We extend Naive UI, PrimeVue, or shadcn-vue when speed matters; build from scratch when the design system demands it. Tailwind underneath either way.
Sheet 07 · Start a brief
Vue, structured to last.
Tell us what you are building and where Vue fits. We'll come back with an architecture and a plan.