Vuesion encourages building features vertically.
Instead of implementing the entire frontend or backend first, each feature is developed from the data model to the user interface.
This keeps every layer aligned and allows new functionality to become usable early while remaining easy to understand.
Although every project is different, most features follow the same general workflow.
Every feature starts with understanding the problem.
This often happens in Figma, where the user experience, user flows, and component structure are explored before implementation begins.
Design is more than visual appearance.
It defines:
Understanding these decisions early helps avoid unnecessary implementation work later.
Once the feature has been designed, the next step is defining the database model.
In Vuesion, Prisma models form the foundation for the rest of the development workflow.
Because generators build upon these models, the database structure is typically created before any application code.
Feature
│
▼
Prisma schema
│
▼
Generators
Vuesion includes generators that create the initial structure for new features.
Rather than creating files manually, generators provide a consistent starting point for:
The generated code is intentionally lightweight and intended to be extended rather than replaced.
With the domain model in place, the backend implementation begins.
This usually includes:
At this stage the feature already exposes a complete server API that can be tested independently from the frontend.
The user interface is implemented from the existing Figma design.
Components are created to match the structure and naming used in the design system.
A typical workflow is:
Figma
│
▼
Storybook component
│
▼
Tests
│
▼
Application
Components are first developed and verified in isolation.
Only after their behavior is complete are they assembled into complete pages and user flows.
Once both backend and UI are ready, the feature is connected.
Pages coordinate the different components while action composables communicate with the server and update the stores.
Page
│
▼
Action composable
│
▼
Server
│
▼
Store
│
▼
Reactive UI
This keeps presentation separate from application logic and allows components to remain reusable.
Development does not end with writing application code.
Whenever new user-facing text is introduced, translation files should be updated using:
npm run extract-i18n-messages
Keeping generated artifacts synchronized ensures that the project remains consistent over time.
Testing is integrated into the workflow rather than treated as a final step.
Components are typically tested after their behavior has been completed in Storybook.
Backend functionality is verified through automated tests, and complete user journeys are covered by end-to-end tests.
By the time a feature reaches a page, most of its individual building blocks have already been validated independently.
Vuesion generates its OpenAPI specification directly from the controller code.
Because the documentation is inferred from the implementation, there is no separate Swagger document that needs to be maintained manually.
This keeps the API documentation accurate while eliminating duplicated work.
Many projects begin by building isolated frontend screens or backend endpoints before the overall feature has taken shape.
Vuesion instead builds features vertically.
Each feature grows through the same sequence:
Design
│
▼
Database
│
▼
Generated foundation
│
▼
Backend
│
▼
Components
│
▼
Pages
│
▼
Integrated feature
This keeps the frontend, backend, and data model aligned while minimizing rework as requirements evolve.
Continue with Layout Components to learn how Vuesion structures interfaces using composable layout primitives instead of custom layout CSS.