Vue 3 + TypeScript Professional Template

A production-ready setup for building Vue 3 applications with TypeScript, testing, Docker, ESLint, and Prettier.

---

Features

• Frontend: Vue 3, TypeScript, Vite
• Testing: Vitest, Testing Library, Jest DOM
• Code Quality: ESLint, Prettier
• Docker: Multi-stage Dockerfile for production builds
• Web Server: Nginx (with SPA fallback to index.html)
• Scripts: Dev, Build, Preview, Lint, Format, Test

---

Table of Contents

1. Getting Started
2. Development
3. Code Quality
4. Testing
5. Docker Deployment
6. Web Server Deployment
7. Notes

---

Getting Started

Install Dependencies

Each project manages its own dependencies:

cd frontend && npm install

Available Scripts

• Dev Server: npm run dev
• Build: npm run build
• Preview: npm run preview
• Lint: npm run lint
• Format: npm run format
• Test: npm run test

Running Development Servers

# Terminal 1 (frontend)
cd frontend && npm run dev

Access locally:

• Frontend → http://localhost:${FRONTEND_DEV_PORT:-5173}
• Backend →
• Swagger UI →

---

Development

Before committing code, make sure files are linted and formatted:

# Format & lint frontend
cd frontend && npm run lint
cd frontend && npm run lint:fix

⚡ Husky + lint-staged will auto-run these checks on staged files during commits.

Setting Up Husky and Linting

For the first time after cloning the project, run the following command to set up Husky:

npm run prepare

This will configure Git hooks for pre-commit checks.

---

To automatically fix linting issues in the code, run:

npm run lint:fix

This will apply ESLint and Prettier fixes where possible.

---

Code Quality

• ESLint is configured for Vue 3 + TypeScript.
• Prettier is integrated with ESLint to auto-format code.

---

Testing

• Vitest is configured with jsdom.
• Includes Testing Library + jest-dom for component testing.

---

Docker Deployment

A multi-stage Dockerfile builds the Vue frontend and serves it with Nginx. For local development with both frontend + backend:

# Copy environment config
cp .env.sample .env

# Build and run
cd deployment/local
docker compose up -d --build

Access locally via docker:

• Frontend → http://localhost:${FRONTEND_DEV_PORT:-8080}
• Backend →
• Swagger UI →

---