Vue 3 Design Patterns Demo

The Vue 3 Design Patterns demo is based on Michael Thiessen's Scaling Your Vue App: 4 Proven Patterns to Keep It Clean article.

🏪 Data Store Pattern The taskStore provides a single source of truth for all task data. It uses Vue's reactive() to ensure all components stay in sync when data changes. Check the browser console to see state changes.

🧩 Thin Composables Pattern The useTasks() wraps store operations with loading states and error handling. useTaskFilters() handles all filtering logic without UI concerns. This keeps components focused on presentation.

⚙️ Options Object Pattern The useTaskFilters() composable accepts an options object with 15+ configuration properties. Try changing persistFilters: true - your filters survive page reloads! Debouncing, search fields, and callbacks are all configurable.

🔄 Flexible Arguments Pattern The useTaskInput can parse strings, objects, arrays, JSON, or mixed formats. Try the different input modes and examples to see how the same composable handles completely different input types seamlessly.

🛠️ Getting Started

1. Install dependencies:

   npm install

2. Start development server:

   npm run dev

3. Build for production:

   npm run build