🌐 Devkit Vue 3

📖 Presentation

A Vue 3 / Vuetify 3 / Vite / JWT stack that can be run as a standalone frontend or in a fullstack setup with another repo (ex: Node, Swift).

Designed to be cloned into downstream projects and kept up-to-date via git merge from the stack repo.

📦 Technology Overview

Subject	Informations
Architecture	Layered Architecture : everything is separated in layers, and the upper layers are abstractions of the lower ones, that's why every layer should only reference the immediate lower layer (vertical modules architecture)
Security	JWT Stateless - take a look at the Node stack for more information
CI	GitHub Actions
Linter	ESLint ecmaVersion 10 (2019)
Developer	Dependabot - Snyk semantic-release - commitlint - commitizen
Dependencies	npm
Deliver	Docker & Docker-compose

🎉 Features Overview

Core

• User : classic register / auth

Examples

• Tasks : list - add - edit - delete
• Mails Subscriptions : add

📌 Prerequisites

• Git - Download & Install Git
• Node.js (22.x or 24.x) - Download & Install Node.js
  • Recommended: Use nvm for Node version management

💥 Installation

git clone https://github.com/pierreb-devkit/Vue.git && cd Vue
npm install

🏃 Running Your Application

Development

npm run dev

Runs dev server with hot-reload at http://localhost:8080/

CORS Note: When connecting to the Node stack, ensure CORS is configured:

WAOS_NODE_cors_origin=['http://localhost:8080'] npm start

Production

npm run build      # Build for production
npm run preview    # Preview production build locally

Testing

npm test                  # Run tests in watch mode
npm run test:unit         # Run unit tests
npm run test:coverage     # Generate coverage report

Tests are organized per module in src/modules/*/tests/

Code Quality

npm run lint              # Check code quality
npm run lint:fix          # Auto-fix linting issues
npm run format            # Format code with Prettier

Commits & Releases

npm run commit                                    # Commit with commitizen
npm run release -- --first-release                # First release
npm run release -- --release-as 1.1.1             # Release specific version
GITHUB_TOKEN=xxx npm run release:auto             # Semantic release (CI)

🔧 Configuration

Configuration files live in src/config/defaults/. The development.js file is the base; other files in that folder override it.

At build time, environment variables prefixed with WAOS_VUE_ are merged on top (WAOS is a legacy prefix kept for compatibility). The variable path maps directly to the config object key:

WAOS_VUE_app_title='my app'        # sets config.app.title
WAOS_VUE_api_port=4000             # sets config.api.port

The merged result is written to src/config/index.js via npm run generateConfig.

🐳 Docker

docker run --rm -p 8080:80 pierreb/vue

Build yourself:

docker build -t pierreb/vue . --build-arg WAOS_VUE_api_port=4000

With Node stack as API:

docker-compose up

🤖 Claude Code Setup

This stack ships with an embedded Claude Code configuration in the .claude/ folder — works immediately after cloning, no additional setup needed.

Available Skills

Skill	Description
/verify	Run quality loop (lint + test + build)
/create-module	Create new module by duplicating the tasks template
/feature	Implement feature following modularity rules
/update-stack	Merge stack updates into downstream projects
/naming	Check or apply file and folder naming conventions

Modularity Rules

• Each module should be as independent as possible
• Avoid cross-module imports/coupling
• Shared code goes in src/modules/core with explicit justification
• Keep config, routes, data-access, and business logic inside the module boundary
• Tests are organized per module: src/modules/*/tests/

Stack Merge Workflow

git remote add devkit-vue https://github.com/pierreb-devkit/Vue.git
git fetch devkit-vue
git merge devkit-vue/master

✏️ Contribute

Open issues and pull requests on GitHub.

📜 History

This work is based on MEAN.js and more precisely on a fork named Riess.js. The goal is a simple, easy-to-use toolbox to start and maintain fullstack projects across multiple languages (Vue, Node, Swift ...).

📋 Licence

🔗 Links