Vue Field GuideCalm conventions for confident Vue teams

A practical reference for naming, architecture, data, quality, and delivery.

Browse conventions

Use the decision matrix

An illustrated field guide for Vue.js conventions

Foundations

Naming, folder structure, and TypeScript choices that make a codebase legible.

Vue architecture

Components, composables, and routing patterns for clear boundaries.

Data & state

Query, mutation, and store guidance for predictable application state.

Quality & delivery

Testing, formatting, reviews, and documentation practices that scale.

A reference library for Vue

Make the next decision easier.

Use these conventions when a choice needs a shared answer—not as a substitute for judgment. Each guide favors readable code, explicit boundaries, and patterns that are easy to explain in review.

Quick orientation

Start with the decision in front of you.

Browse by domain, or jump straight to the matrix for a concise comparison of common Vue patterns.

Open the decision matrix

A field guide shaped by real Vue work

Since 2017, I have worked with Vue.js across projects with different setups and teams. Those 9 years shaped this guide.

As applications grow, personal preferences can spread from one component to the next. The codebase then carries several ways to solve the same problem, which makes maintenance harder over time.

This guide sets shared conventions for the parts of a Vue project that carry long-term decisions. It covers components, routing, controllers, services, state, persistence, testing, error handling, async work, structure, naming, boundaries, and team review.

The guide is free under the MIT license. Use any part of it in your own project or adapt it into a guide for your team.