git-agent for Vue

Conventional commits for Vue 3 Composition API and SFCs

git-agent handles Vue single-file component diffs, Pinia store changes, and Vue Router updates, producing conventional commit messages that align with Vue project conventions.

diff --git a/src/stores/cart.ts b/src/stores/cart.ts index 5a2b1c3..3d8f9e4 100644 --- a/src/stores/cart.ts +++ b/src/stores/cart.ts @@ -1,16 +1,28 @@ import { defineStore } from "pinia"; +import { ref, computed } from "vue"; +import type { CartItem } from "@/types"; -export const useCartStore = defineStore("cart", { - state: () => ({ items: [] }), - getters: { - total: (state) => state.items.reduce((s, i) => s + i.price, 0), - }, - actions: { - addItem(item) { this.items.push(item); }, - }, +export const useCartStore = defineStore("cart", () => { + const items = ref<CartItem[]>([]); + + const total = computed(() => + items.value.reduce((sum, item) => sum + item.price * item.quantity, 0) + ); + + function addItem(item: CartItem) { + const existing = items.value.find((i) => i.id === item.id); + if (existing) { + existing.quantity += item.quantity; + } else { + items.value.push(item); + } + } + + return { items, total, addItem }; });
git-agent output
refactor(store): migrate cart store to Composition API setup syntax - convert Options API store to setup() style for consistency with component code - add quantity accumulation when adding a duplicate item instead of duplicating the entry - strengthen types: CartItem[] for items, multiply price by quantity in total The Options API style was the only remaining store not using setup syntax; unifying the pattern improves readability and makes type inference work without casting.
  • Understands Vue SFC structure (script, template, style blocks) in diffs
  • Separates Pinia store changes from component changes
  • Recognises Vue Router route definition changes for accurate scope naming
  • Works with Nuxt.js projects and their file-based routing conventions
brew install gitagenthq/tap/git-agent # inside your Vue project git-agent init # detects src/stores and src/views for scope suggestions
Does git-agent handle changes inside .vue files correctly?
Yes. The LLM understands SFC file format and can correctly interpret diffs that span multiple blocks within a single .vue file.
Can git-agent work with both Vue 2 and Vue 3 projects?
Yes. git-agent operates on diffs without requiring a specific Vue version. Both Options API (Vue 2 style) and Composition API diffs are handled correctly.
How does git-agent handle Vuex vs Pinia store changes?
Both Vuex and Pinia store files are grouped by store module. The LLM recognises the respective APIs and generates accurate descriptions regardless of which state management library you use.