I Built My Own Vue 3 Project Starter

I created a Vue 3 starter template to give my projects a consistent foundation for development, testing, API mocking, and component organization.

This project is available on GitHub:

https://github.com/hdJerry/vue-starter

It can be used to scaffold a new project with npx:

npx create-vue-starter-with-test my-app
cd my-app
yarn dev

The endgame is simple: start a Vue project with some of the configuration and structure I normally set up manually.

The stack

The starter is built with:

• Vue 3
• Vite
• TypeScript
• Unit testing
• API mocking
• Prettier
• Atomic Design-inspired component organization

This gives a new project a basic development and testing environment without having to configure everything from scratch.

Component architecture

One of the main architectural decisions was to organize components using the concepts of Atomic Design.

The structure is:

src/
└── components/
    ├── atoms/
    ├── molecules/
    ├── organisms/
    └── templates/

The idea is to separate components based on their level of composition.

Atoms are small reusable UI elements.

Molecules combine atoms into more specific UI components.

Organisms combine multiple components into larger sections of an interface.

Templates define page-level layouts and composition.

This provides a predictable structure as the application grows and makes reusable components easier to identify.

Testing

Testing is included in the starter rather than added later.

The project provides the initial setup required to write unit tests for the application.

For me, having the testing infrastructure available from the beginning makes it easier to treat testing as part of the development workflow rather than a separate task that needs to be introduced later.

API mocking

The starter also includes API mocking.

This allows frontend development to continue without requiring a live backend for every development scenario.

Mocked responses can be used while building components and testing application behavior, which is particularly useful when frontend and backend development are happening in parallel.

Why npx?

I wanted the project to behave more like a development tool than a repository that needs to be cloned and manually configured.

The intended workflow is:

npx create-vue-starter-with-test my-app

The developer gets a new project from the starter and can immediately begin working on the application.

This also means improvements to the starter can be distributed through future versions rather than requiring developers to manually copy changes from the repository.

Building the component structure

The Atomic Design structure was introduced through PR #7.

The change established the initial separation between atoms, molecules, organisms, and templates.

I wanted the architecture to encourage composition and reuse rather than having every new feature introduce another isolated component.

The structure is intentionally simple. It can be adapted as the application develops instead of trying to solve every architectural problem at the scaffolding stage.

What I learned

Building the starter made me think more carefully about what should be part of a project foundation.

A starter should provide useful defaults without becoming so opinionated that developers spend more time working around it than using it.

That means some things belong in the foundation:

• development tooling
• testing
• formatting
• API mocking
• basic component organization

Other decisions are better left to the application itself.

That balance is probably the most interesting part of building a reusable starter.

What's next

The project is available on GitHub and I plan to continue improving it as I use it and receive feedback.

The repository is here:

https://github.com/hdJerry/vue-starter

If you work with Vue, I'd be interested in hearing what you normally include in your own project starter and what you would add to this one.