$ show Shyam-Chen/Vue-Starter
This repository is a full-stack web application starter kit built with Vue 3, TypeScript, and Vite. It includes a reusable UI component library (@x/ui), a mock backend (Fastify) for development, and end-to-end tests (Playwright). The application demonstrates common patterns for admin dashboards, including authentication, form validation, data tables, charts, and internationalization. The UI library provides over 50 components (buttons, forms, tables, notifications, etc.) and utilities (HTTP request handling, queue guard, static table operations) designed for reuse in other projects. The monorepo structure (using pnpm workspace) separates the frontend application, UI library, and mock backend, enabling modular development.
The LLM identified 5 files worth highlighting for reuse:
Encapsulates API request handling with automatic token refresh and queuing of requests during refresh. Demonstrates skill in managing authentication state and preventing race conditions in concurrent requests. Framework-agnostic core logic makes it reusable in any Vue 3 application.
Provides a utility to prevent duplicate executions of async functions (e.g., form submissions). Simple, reusable, and framework-agnostic. Can be applied to any async function to prevent multiple rapid calls.
A reusable form field wrapper that consistently handles labels, help text, validation states, and slots for input components. Reduces boilerplate in form creation and ensures consistent UI. Isolated with minimal dependencies (only internal utilities).
A highly configurable button component supporting multiple variants (contained, outlined, text), sizes, loading states, and icon placement. Demonstrates encapsulation of UI complexity into a simple API. Self-contained with clear props and emits.
A Vue composable for managing notification state (e.g., showing success/error messages). Centralizes notification logic and can be used with any notification component. Demonstrates reusable state management pattern outside of components.