Fast Vue3

Languages: English | 简体中文 | 繁體中文（台灣） | 繁體中文（香港） | 日本語

A Vue 3 + TypeScript monorepo that delivers the same admin and public-site experience across seven Vue UI ecosystems.

Documentation: https://tobe-fe-dalao.github.io/fast-vue3-site/ · Spring Boot server guide

All 14 framework apps consume the same typed API contract. Admin apps include dashboards, users, roles, menus, content, logs, configuration, and monitoring. Site apps include home, product, pricing, FAQ, blog, authentication, and contact pages.

Pages is served from the gh-pages branch. Pushing main runs the repository's original peaceiris/actions-gh-pages deployment model automatically. You can also run pnpm deploy:pages locally; use --dry-run to stage without pushing and --force when the branch history has to be replaced.

Pages previews use an in-browser static mock by default. Sign in with admin / 123456; changes reset when the page reloads. To use a real service, deploy with VITE_STATIC_MOCK=false and set VITE_APP_API_BASEURL.

fast-vue3/
├── apps/
│   ├── web-*              # Seven admin applications
│   ├── site-*             # Seven public-site applications
│   ├── web-app            # Generic site-style application
│   └── backend-mock       # Nitro API mock
├── packages/
│   ├── effects/api        # Canonical API types and domain clients
│   ├── effects/request    # Axios client and response-envelope handling
│   ├── stores             # Pinia stores
│   ├── preferences        # Theme and layout preferences
│   ├── styles             # Shared admin/site styles
│   └── types, utils, locales, constants
├── internal/              # Shared Vite, lint, tsconfig, and Node tooling
└── scripts/               # App launcher and scaffolding CLI

pnpm install

Mock mode is the default. Select an application interactively:

pnpm dev
# or explicitly
pnpm dev:mock

Start a specific app:

pnpm dev:web-antd
pnpm dev:web-arco
pnpm dev:web-ele
pnpm dev:web-idux
pnpm dev:web-naive
pnpm dev:web-primevue
pnpm dev:web-tdesign

pnpm dev:site-antd
pnpm dev:site-arco
pnpm dev:site-ele
pnpm dev:site-idux
pnpm dev:site-naive
pnpm dev:site-primevue
pnpm dev:site-tdesign

Mock credentials: admin / 123456.

Without installing Java locally, start PostgreSQL, Redis, and the API server with Docker Desktop or OrbStack (both provide the same Docker Compose CLI):

cd /Users/fong/Workspace/personal/frontend/vue/fast-vue3/fast-vue3-server
cp .env.example .env # first run only
docker compose --profile app up -d --build
docker compose ps

For local JDK 21 development, run docker compose up -d for PostgreSQL and Redis, then ./mvnw spring-boot:run.

Then start any frontend in server mode:

cd /Users/fong/Workspace/personal/frontend/vue/fast-vue3/fast-vue3
VITE_DEV_BACKEND=server pnpm dev:web-antd
# or
VITE_DEV_BACKEND=server pnpm dev:site-antd

pnpm dev:server opens the interactive selector in server mode. Override the API host when needed:

VITE_FAST_VUE3_SERVER_URL=http://localhost:8080 pnpm dev:server

• Health: http://localhost:8080/actuator/health
• Swagger: http://localhost:8080/swagger-ui.html
• Development credentials: admin / admin123

Frontend requests always use /api/v1; shared Vite configuration proxies them to Nitro (mock) or Spring Boot (server).

Content remains public and does not redirect users to login:

• GET /public/home, /product, /features, /about, /docs, /faq, /pricing
• GET /public/blog and /public/blog/{id}
• GET /public/blog/{id}/comments
• POST /public/contact

Only user interactions require a Bearer access token:

• POST /blog/{id}/comments
• POST /payments/checkout

The pricing page opens a checkout dialog for purchasable plans, supports Alipay, WeChat Pay, and card channel selection, and creates a pending payment order. The blog detail page shows comments publicly and sends anonymous users to login before posting. The login page returns users to the originating pricing or blog URL.

The bundled checkout is intentionally a safe demo adapter: it persists an order and returns checkoutUrl, but does not charge real money. Production deployments should exchange that URL through their payment-provider integration and implement signed callback verification.

packages/effects/api/src/types.ts is the frontend source of truth. Both Nitro Mock and fast-vue3-server return:

{ "code": 0, "message": "success", "data": {} }

Paginated data uses { items, page, pageSize, total }. When adding an endpoint, update the shared types/client, Nitro route, Spring controller/service, and contract/integration tests together.

pnpm lint
pnpm format
pnpm typecheck
pnpm test
pnpm build

Build one application with pnpm build:web-antd or pnpm build:site-antd.

pnpm create-app

The CLI creates an admin or site app for one of the seven supported UI ecosystems and adds canonical dev:<app-name> and build:<app-name> scripts.

MIT