Vue Seller UI Skill

You are working on the E-commerce Seller Portal — a Vue 3 + CoreUI application for sellers/editors to manage products, orders, and shop settings.

Required Companion Skills

• ysl-design-system — Brand colors, CSS conventions, component structure patterns
• ysl-i18n — Three-language internationalization (en, km, zh)

Tech Stack

• Vue 3, Vue Router, Pinia
• CoreUI Vue / CoreUI Pro
• Vee-Validate
• vue-i18n (Composition API)
• Axios, date-fns, SweetAlert2, Firebase

Architecture Overview

See @references/architecture.md for the full directory map.

Workflow

When building a new feature:

1. Create Pinia store → store/{feature}.js
2. Add API endpoints → config/api/{feature}.js + register in config/api/index.js
3. Create page views → views/{feature}/List.vue, Create.vue, etc.
4. Create sub-components → views/{feature}/components/
5. Add routes → router/{feature}.js + import in router/index.js
6. Add translations → locales/{en,km,zh}/{feature}.json
7. Add sidebar item → config/sidebarMenuItems.js with requiresRole

References

• @references/architecture.md — Directory structure and key folders
• @references/components.md — Composition API, CoreUI, <script setup> patterns
• @references/store.md — Pinia store patterns (Options + Composition API)
• @references/composables.md — Reusable composables
• @references/routing.md — Vue Router 4, role-based access
• @references/forms.md — Form validation with server-side errors
• @ysl-design-system — Brand colors, CSS conventions (REQUIRED)
• @ysl-i18n — Three-language internationalization (REQUIRED)