Nuxt 4 frontend for Outless — a VLESS node management system.
This is the admin UI for managing node groups, VLESS nodes, and access tokens. It communicates with the Outless backend API.
Architecture: SPA with TanStack Query for server state, Pinia for client state, Zod for validation.
# 1. Install dependencies
pnpm install
# 2. Configure environment
cp .env.example .env
# Edit: API_BASE_URL=http://localhost:41220
# 3. Run development server (port 41221)
pnpm devThe app will be available at http://localhost:41221.
- Framework: Nuxt 4
- Language: TypeScript (strict mode)
- UI: Shadcn-vue
- Styling: Tailwind CSS
- Server State: TanStack Query v5
- Client State: Pinia
- Validation: Zod + Vee-Validate
- Fetching: ofetch
- Icons: Lucide-vue-next
- Package Manager: pnpm
pnpm installpnpm devpnpm buildpnpm typecheckSee frontend.md for detailed architecture rules and standards.
app/ # Nuxt 4 assets
components/
ui/ # Shadcn atomic components
composables/ # Global composables
layouts/ # Page layouts
pages/ # File-based routing
middleware/ # Route guards
plugins/ # Nuxt plugins
features/
[feature-name]/
components/ # Feature-specific components
composables/ # Feature-scoped composables
schemas/ # Zod schemas
services/ # API calls
stores/ # Pinia stores (client state only)
types/ # Shared TypeScript types
- Schema-First: All API data must have Zod schemas before component logic
- Zero-CSS: No
<style>blocks, no custom CSS - TanStack Query: Server state lives in query cache, not Pinia
- File Size Limits: Components < 250 lines, composables < 200 lines
# Build image
docker build -t outless-frontend .
# Run
docker run -p 3000:3000 -e API_BASE_URL=http://backend:8080 outless-frontend# Generate static site
pnpm generate
# Output in .output/public/See CONTRIBUTING.md for detailed contribution rules.