Loading · Vue
Stack Innovations/ Services/ Custom Development/ Vue
03 / 08 · Custom Development
000Compiling Vue

Vue

Bespoke Vue applications, engineered for the ten-year arc.

Start a build
The argument

A Vue app is just reactive state that renders itself.

Each ref · a signal. Each computed · a contract. Each render · already decided.
02 — Ecosystem

Vue,
and the right neighbours.

Meta-framework/01
Nuxt 4

File-based routing, SSR/SSG, server routes — our default for product surfaces.

SSRSSGNitroFile routes
Framework/02
Vue 3

Composition API, fine-grained reactivity via Proxies.

CompositionReactivity
Build tool/03
Vite

The build tool Vue's own team builds and maintains.

HMRESM
State/04
Pinia

The official Vue store, typed and devtools-native.

StoresDevtools
Utilities/05
VueUse

200+ composables for the problems every app hits.

Composables
Routing/06
Vue Router

Nested routes, guards, lazy-loaded views.

GuardsNested
Data fetching/07
TanStack Query

Caching, retries, and background refetch for server state.

CacheRefetch
Forms/08
Vee-Validate + Zod

Schema-validated forms, accessible by default.

SchemaA11y
Styling/09
UnoCSS

Atomic CSS, on-demand, instant in dev.

AtomicOn-demand
Testing/10
Vitest + Playwright

Vitest for unit and component tests, Vite-native with instant feedback. Playwright for end-to-end flows across browsers.

UnitComponente2e
Runtime/11
TypeScript

Typed SFCs end to end, `<script setup lang="ts">` by default.

SFCStrict
03 — What we build

Three shapes,
one toolkit.

01 — Content
Content-driven
sites.

Nuxt SSG/SSR for marketing and docs. Fast first paint, clean URLs, content that ships from a folder of Markdown.

  • File-based routing · pages/Nuxt
  • Static generation · build-timeSSG
  • Content collections · MD/MDCNuxt Content
  • SEO · meta, sitemaps, OG imagesBuilt-in
pages/blog/[slug].vue
02 — SaaS
SaaS
dashboards.

Pinia-driven state, data-dense views. Live tables, charts, and forms that stay in sync without prop-drilling.

  • Store-driven views · single sourcePinia
  • Server state · cache + refetchTanStack
  • Charts & tables · virtualised60fps
  • Auth & permissions · route guardsVue Router
id status owner updated
03 — Internal tools
Internal
tools.

Admin panels, CRUD, rapid iteration. Composables carry the logic; components stay disposable and easy to rewrite.

  • CRUD scaffolds · forms + tablesVee-Validate
  • Composables · shared logicVueUse
  • Role-gated views · per-routeGuards
  • Bulk actions · optimistic UIPinia
w1 w6 w12
/ Phase 01 · Discover

Listen first.

Stakeholder interviews, support tickets, session replays. We map the architecture by mapping the work.

Discovery docTech auditRisk map
SCOPE USERS DATA TEAM RISK OUTCOME
pages/ index.vue dashboard/[id].vue settings/index.vue server/api/orders.ts layouts/default.vue composables/useAuth.ts
const useCounter = () => { const count = ref(0) return { count, inc }
// OrderTable.vue <script setup lang="ts"> const store = useOrdersStore() const { rows } = storeToRefs(store) </script> <template> <tr v-for="r in rows" :key="r.id"> </template> → reactive end to end → typed props & emits → tested · vitest + vue-test-utils
w1 w6 w12 +37% activation
01
01
05
05 — Architecture

A request,
end to end.

// live · GET /api/orders?status=open
Request Static
Client Vue · Nuxt Hydrated islands Edge Nitro ~36ms TTFB API Nuxt server routes Auth · RBAC DB Postgres Read replicas Observability OpenTelemetry Logs · Traces · Metrics
Client → Edge~10ms
Edge → API~18ms
API → DB~7ms
Round-trip · p95112ms
06 — Numbers

Standards,
not anecdotes.

What every Vue build leaves with — the floor, not the ceiling.

Median Lighthouse 0 perf · across last 12 builds
#StandardFloorMethod
01 Lighthouse · perfdesktop · cold 0 CI
02 Initial bundle · gziproute-level 0kB size-limit
03 TTFB · edgep50 0ms RUM
04 Type coveragestrict mode 0% vue-tsc
05 Critical a11y issuesWCAG 2.2 AA 0 axe
06 Median design → readycomponent-to-component 0d linear
08 — Engagement

Three ways
to start.

01 / Sprint2 weeks
Diagnostic
sprint.
flatfixed scope
  • Tech audit · current Vue stack
  • Architecture proposal
  • Risk & cost map
  • Live walkthrough · written report
Book a sprint
02 / MVP— Most chosen
MVP ship.
retainer4–8 weeks
  • One product surface, end to end
  • Auth · Billing · Telemetry wired
  • Design system seed · 24 components
  • CI/CD · monitoring · runbook
  • Two rounds of post-launch iteration
Start an MVP
03 / Build12+ weeks
Ground-up
platform.
retainerquarterly
  • Multi-surface platform
  • Internal admin + customer app
  • Embedded design partner
  • Hand-off plan, onboarded team
Plan a build
09 — Questions

Things people
actually ask.

Vue's single-file components keep template, script, and style in one readable file, which shortens onboarding for teams that aren't full-time frontend specialists. The Composition API gives the same fine-grained control as React hooks without the dependency-array footguns, and Nuxt's conventions (file routing, auto-imports, server routes) mean less boilerplate per feature. We reach for React when the hiring pool or an existing ecosystem makes the case — for content sites, dashboards, and internal tools, Vue often ships faster with fewer decisions.
Composition API with `<script setup>`, by default, on every new project. It composes better across components via composables, gives full TypeScript inference, and is what Vue 3's own ecosystem (Nuxt, Pinia, VueUse) is built around. Options API is still fully supported in Vue 3 — we reach for it mainly on legacy Vue 2 work, or the rare new component where its structure helps a less experienced contributor.
Nuxt for anything that needs SSR, SSG, SEO, or server routes — which covers most product surfaces and content sites. Plain Vite + Vue Router for SPAs that live behind auth, like internal admin tools, where there's no SEO requirement and the extra server runtime isn't buying anything. We pick per surface, not per project.
Pinia is the official Vue store and the only one we reach for — it replaced Vuex, has first-class TypeScript support, devtools time-travel debugging, and a flat store API with no mutations boilerplate. For server state (API data, caching, refetching) we layer TanStack Query on top rather than stuffing it into a Pinia store.
Yes. Vue 2 reached end-of-life in December 2023, so this is common work. We start with the official migration build to flag breaking changes, convert Options API components to Composition API incrementally rather than in one pass, and swap Vuex for Pinia and vue-router 3 for vue-router 4 as part of the same effort. No big-bang rewrites.
Vitest with Vue Test Utils for unit and component tests — Vite-native, so it shares config with the app and runs fast. Playwright for end-to-end flows across browsers, axe-core for accessibility checks. CI runs the full suite on every PR; nothing ships if the suite is red.
10 — Start

Let's build
something worth shipping.

Two-week diagnostic, four-week MVP, twelve-week ground-up. Bring the brief — we'll send a plan, not a pitch deck.

Start a project
Tweaks
Accent
Motion
Lenis
Sound