Vue.js Project Management | Components & Pinia Stores
Manage Vue.js projects with component-based labels and Pinia/Vuex tracking. GitScrum supports Composition API migration and SFC workflows.
5 min read
Vue.js teams need project management that understands component-driven development. GitScrum helps organize work around Vue's architecture—components, composables, Vuex/Pinia stores—while providing the kanban boards and sprint tracking that keep frontend development on schedule.
Vue.js Project Structure
Component-Based Organization
VUE PROJECT BOARD:
┌─────────────────────────────────────────────────────────────┐
│ DASHBOARD FEATURE │
├──────────────┬───────────────┬───────────────┬──────────────┤
│ BACKLOG │ IN PROGRESS │ REVIEW │ DONE │
├──────────────┼───────────────┼───────────────┼──────────────┤
│ │ │ │ │
│ ┌──────────┐ │ ┌───────────┐ │ ┌───────────┐ │ ┌──────────┐ │
│ │🧩 Chart │ │ │🧩 DataGrid│ │ │🧩 Filters │ │ │🧩 Header │ │
│ │Component │ │ │ Component │ │ │ Component │ │ │Component │ │
│ │ │ │ │ │ │ │ │ │ │ │ │
│ │v-chart │ │ │Vue Query │ │ │composable │ │ │slots │ │
│ └──────────┘ │ └───────────┘ │ └───────────┘ │ └──────────┘ │
│ │ │ │ │
│ ┌──────────┐ │ ┌───────────┐ │ │ ┌──────────┐ │
│ │📦 Pinia │ │ │🎨 Theme │ │ │ │📦 Store │ │
│ │Dashboard │ │ │ Variables │ │ │ │ Module │ │
│ │ Store │ │ │ │ │ │ │ │ │
│ └──────────┘ │ │CSS vars │ │ │ │auth.ts │ │
│ │ └───────────┘ │ │ └──────────┘ │
│ │ │ │ │
└──────────────┴───────────────┴───────────────┴──────────────┘
Vue-Specific Labels
Categorize Your Work
VUE.JS TASK LABELS:
┌─────────────────────────────────────────────────────────────┐
│ RECOMMENDED LABELS │
├─────────────────────────────────────────────────────────────┤
│ │
│ COMPONENT TYPES: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ 🧩 component - Vue SFC work ││
│ │ 📦 composable - Composition API hooks ││
│ │ 🗃️ store - Pinia/Vuex work ││
│ │ 📄 page - Page-level components ││
│ │ 🎨 layout - Layout components ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ WORK TYPES: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ 🆕 feature - New functionality ││
│ │ 🐛 bug - Bug fixes ││
│ │ ♻️ refactor - Options → Composition API ││
│ │ 📐 styling - CSS/styling work ││
│ │ ⚡ performance - Performance optimization ││
│ │ 🧪 testing - Unit/component tests ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ VUE-SPECIFIC: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ 🔄 reactivity - Reactivity system issues ││
│ │ 🚀 vue-router - Router related ││
│ │ 📡 api - API integration ││
│ │ 🎯 directive - Custom directives ││
│ │ 🔌 plugin - Plugin development ││
│ └─────────────────────────────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────┘
State Management Tasks
Pinia/Vuex Organization
STATE MANAGEMENT BOARD:
┌─────────────────────────────────────────────────────────────┐
│ PINIA STORES SPRINT │
├─────────────────────────────────────────────────────────────┤
│ │
│ STORE MODULES: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ Task: User Store ││
│ │ ├── State: currentUser, isAuthenticated ││
│ │ ├── Getters: fullName, permissions ││
│ │ ├── Actions: login, logout, updateProfile ││
│ │ └── Tests: useUserStore.spec.ts ││
│ │ ││
│ │ CHECKLIST: ││
│ │ ☑ Define state interface ││
│ │ ☑ Implement getters ││
│ │ ☐ Add actions with API calls ││
│ │ ☐ Add persistence plugin ││
│ │ ☐ Write tests ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ LINKED COMMITS: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ • abc123 - feat(store): add user store ││
│ │ • def456 - feat(store): add getters ││
│ │ • ghi789 - test(store): add user store tests ││
│ └─────────────────────────────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────┘
Composition API Migration
Track Refactoring
OPTIONS → COMPOSITION API:
┌─────────────────────────────────────────────────────────────┐
│ MIGRATION TRACKING │
├─────────────────────────────────────────────────────────────┤
│ │
│ MIGRATION SPRINT: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ TODO IN PROGRESS MIGRATED ││
│ │ ─────────────────────────────────────────────────────── ││
│ │ ProductList.vue UserCard.vue Header.vue ││
│ │ CartView.vue Footer.vue ││
│ │ AdminPanel.vue NavMenu.vue ││
│ │ Settings.vue Button.vue ││
│ │ Dashboard.vue Input.vue ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ TASK TEMPLATE FOR MIGRATION: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ Title: Migrate ComponentName.vue to Composition API ││
│ │ ││
│ │ Checklist: ││
│ │ ☐ Add setup script lang="ts" ││
│ │ ☐ Convert data() to ref/reactive ││
│ │ ☐ Convert computed to computed() ││
│ │ ☐ Convert methods to functions ││
│ │ ☐ Convert watchers to watch/watchEffect ││
│ │ ☐ Extract composable if logic is reusable ││
│ │ ☐ Update unit tests ││
│ │ ☐ Verify component works correctly ││
│ │ ││
│ │ Labels: ♻️ refactor, 🧩 component ││
│ └─────────────────────────────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────┘