[{"data":1,"prerenderedAt":4892},["ShallowReactive",2],{"navigation":3,"/blog/ai-how-to-use-with-vue":26,"/blog/ai-how-to-use-with-vue-surround":4887},[4],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Blog","/blog","blog",[9,13,17,21],{"title":10,"path":11,"stem":12},"Real-Time Made Simple: How I Use Server-Sent Events (SSE) in Nuxt 3","/blog/a-sse-nuxt3","blog/a-sse-nuxt3",{"title":14,"path":15,"stem":16},"AI-Powered Vue.js Development: A Practical Guide to Smarter Coding with Agents","/blog/ai-how-to-use-with-vue","blog/ai-how-to-use-with-vue",{"title":18,"path":19,"stem":20},"Supercharge React with HOC: How I Build Reusable Components the Smart Way","/blog/b-react-hoc","blog/b-react-hoc",{"title":22,"path":23,"stem":24},"Scaling Design Systems: Handling Growth to a Million Users","/blog/c-design-systems","blog/c-design-systems",false,{"id":27,"title":14,"author":28,"body":32,"date":4880,"description":4881,"extension":4882,"image":4883,"meta":4884,"minRead":286,"navigation":242,"path":15,"seo":4885,"stem":16,"__hash__":4886},"blog/blog/ai-how-to-use-with-vue.md",{"name":29,"avatar":30},"Felipe Leite",{"src":31,"alt":29},"/me.jpeg",{"type":33,"value":34,"toc":4848},"minimal",[35,39,44,47,52,94,98,131,135,139,142,147,161,166,180,185,199,203,206,215,441,444,448,452,457,465,470,874,879,893,897,901,907,912,2027,2032,2069,2073,2076,2081,2087,2092,2119,2123,2127,2132,2138,2143,3251,3255,3259,3265,3270,4593,4597,4601,4667,4671,4737,4741,4744,4748,4754,4758,4763,4769,4773,4776,4793,4797,4803,4807,4810,4813,4817,4837,4842,4845],[36,37,38],"p",{},"AI coding assistants have transformed how we write software, but using them effectively—especially with Vue.js—requires strategy. In this guide, I'll share practical approaches to using AI tools like Claude, GitHub Copilot, and AI agents to enhance your Vue.js development without compromising code quality.",[40,41,43],"h2",{"id":42},"phase-1-understanding-ais-role-in-vuejs-development","Phase 1: Understanding AI's Role in Vue.js Development",[36,45,46],{},"Before diving into specific techniques, it's crucial to understand what AI can and cannot do well in Vue.js projects.",[48,49,51],"h3",{"id":50},"what-ai-excels-at","What AI Excels At",[53,54,55,64,70,76,82,88],"ul",{},[56,57,58,59,63],"li",{},"✅ ",[60,61,62],"strong",{},"Boilerplate Generation"," — Creating component scaffolds, composables, and stores",[56,65,58,66,69],{},[60,67,68],{},"Pattern Recognition"," — Suggesting Vue 3 Composition API patterns",[56,71,58,72,75],{},[60,73,74],{},"Type Safety"," — Generating TypeScript interfaces and proper type annotations",[56,77,58,78,81],{},[60,79,80],{},"Code Refactoring"," — Converting Options API to Composition API",[56,83,58,84,87],{},[60,85,86],{},"Testing"," — Writing unit and component tests",[56,89,58,90,93],{},[60,91,92],{},"Documentation"," — Creating JSDoc comments and README files",[48,95,97],{"id":96},"what-requires-human-oversight","What Requires Human Oversight",[53,99,100,107,113,119,125],{},[56,101,102,103,106],{},"⚠️ ",[60,104,105],{},"Architecture Decisions"," — Choosing state management patterns",[56,108,102,109,112],{},[60,110,111],{},"Performance Optimization"," — Deciding when to use computed vs watch",[56,114,102,115,118],{},[60,116,117],{},"Security"," — Validating XSS prevention and input sanitization",[56,120,102,121,124],{},[60,122,123],{},"UX Logic"," — Implementing complex user interactions",[56,126,102,127,130],{},[60,128,129],{},"Accessibility"," — Ensuring ARIA attributes are correctly used",[40,132,134],{"id":133},"phase-2-setting-up-your-ai-powered-workflow","Phase 2: Setting Up Your AI-Powered Workflow",[48,136,138],{"id":137},"_1-choosing-the-right-ai-tools","1. Choosing the Right AI Tools",[36,140,141],{},"Different AI tools serve different purposes in Vue.js development:",[36,143,144],{},[60,145,146],{},"For Real-Time Coding:",[53,148,149,155],{},[56,150,151,154],{},[60,152,153],{},"GitHub Copilot"," — Inline suggestions as you type",[56,156,157,160],{},[60,158,159],{},"Codeium"," — Free alternative with Vue-specific training",[36,162,163],{},[60,164,165],{},"For Complex Tasks:",[53,167,168,174],{},[56,169,170,173],{},[60,171,172],{},"Claude Code"," — Multi-file refactoring and architectural planning",[56,175,176,179],{},[60,177,178],{},"Cursor AI"," — Codebase-aware context and intelligent edits",[36,181,182],{},[60,183,184],{},"For Code Review:",[53,186,187,193],{},[56,188,189,192],{},[60,190,191],{},"AI PR Review Agents"," — Automated code review on pull requests",[56,194,195,198],{},[60,196,197],{},"SonarQube + AI"," — Security and quality analysis",[48,200,202],{"id":201},"_2-configuring-ai-for-vuejs-context","2. Configuring AI for Vue.js Context",[36,204,205],{},"The key to getting good AI suggestions is providing proper context. Here's how I structure my projects:",[36,207,208],{},[60,209,210,214],{},[211,212,213],"code",{},"/.ai/context.md",":",[216,217,222],"pre",{"className":218,"code":219,"language":220,"meta":221,"style":221},"language-markdown shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Project Context for AI Assistants\n\n## Tech Stack\n\n- Vue 3 with Composition API\n- TypeScript (strict mode)\n- Pinia for state management\n- Vue Router 4\n- Vite as build tool\n\n## Code Standards\n\n- Use `\u003Cscript setup>` syntax\n- Prefer composables over mixins\n- TypeScript for all new files\n- Test coverage minimum 80%\n\n## File Structure\n\n- `/components` — Reusable UI components\n- `/composables` — Shared composition functions\n- `/stores` — Pinia stores\n- `/views` — Page-level components\n","markdown","",[211,223,224,237,244,253,258,268,276,284,292,300,305,313,318,338,346,354,362,367,375,380,396,411,426],{"__ignoreMap":221},[225,226,229,233],"span",{"class":227,"line":228},"line",1,[225,230,232],{"class":231},"sMK4o","# ",[225,234,236],{"class":235},"sBMFI","Project Context for AI Assistants\n",[225,238,240],{"class":227,"line":239},2,[225,241,243],{"emptyLinePlaceholder":242},true,"\n",[225,245,247,250],{"class":227,"line":246},3,[225,248,249],{"class":231},"## ",[225,251,252],{"class":235},"Tech Stack\n",[225,254,256],{"class":227,"line":255},4,[225,257,243],{"emptyLinePlaceholder":242},[225,259,261,264],{"class":227,"line":260},5,[225,262,263],{"class":231},"-",[225,265,267],{"class":266},"sTEyZ"," Vue 3 with Composition API\n",[225,269,271,273],{"class":227,"line":270},6,[225,272,263],{"class":231},[225,274,275],{"class":266}," TypeScript (strict mode)\n",[225,277,279,281],{"class":227,"line":278},7,[225,280,263],{"class":231},[225,282,283],{"class":266}," Pinia for state management\n",[225,285,287,289],{"class":227,"line":286},8,[225,288,263],{"class":231},[225,290,291],{"class":266}," Vue Router 4\n",[225,293,295,297],{"class":227,"line":294},9,[225,296,263],{"class":231},[225,298,299],{"class":266}," Vite as build tool\n",[225,301,303],{"class":227,"line":302},10,[225,304,243],{"emptyLinePlaceholder":242},[225,306,308,310],{"class":227,"line":307},11,[225,309,249],{"class":231},[225,311,312],{"class":235},"Code Standards\n",[225,314,316],{"class":227,"line":315},12,[225,317,243],{"emptyLinePlaceholder":242},[225,319,321,323,326,329,333,335],{"class":227,"line":320},13,[225,322,263],{"class":231},[225,324,325],{"class":266}," Use ",[225,327,328],{"class":231},"`",[225,330,332],{"class":331},"sfazB","\u003Cscript setup>",[225,334,328],{"class":231},[225,336,337],{"class":266}," syntax\n",[225,339,341,343],{"class":227,"line":340},14,[225,342,263],{"class":231},[225,344,345],{"class":266}," Prefer composables over mixins\n",[225,347,349,351],{"class":227,"line":348},15,[225,350,263],{"class":231},[225,352,353],{"class":266}," TypeScript for all new files\n",[225,355,357,359],{"class":227,"line":356},16,[225,358,263],{"class":231},[225,360,361],{"class":266}," Test coverage minimum 80%\n",[225,363,365],{"class":227,"line":364},17,[225,366,243],{"emptyLinePlaceholder":242},[225,368,370,372],{"class":227,"line":369},18,[225,371,249],{"class":231},[225,373,374],{"class":235},"File Structure\n",[225,376,378],{"class":227,"line":377},19,[225,379,243],{"emptyLinePlaceholder":242},[225,381,383,385,388,391,393],{"class":227,"line":382},20,[225,384,263],{"class":231},[225,386,387],{"class":231}," `",[225,389,390],{"class":331},"/components",[225,392,328],{"class":231},[225,394,395],{"class":266}," — Reusable UI components\n",[225,397,399,401,403,406,408],{"class":227,"line":398},21,[225,400,263],{"class":231},[225,402,387],{"class":231},[225,404,405],{"class":331},"/composables",[225,407,328],{"class":231},[225,409,410],{"class":266}," — Shared composition functions\n",[225,412,414,416,418,421,423],{"class":227,"line":413},22,[225,415,263],{"class":231},[225,417,387],{"class":231},[225,419,420],{"class":331},"/stores",[225,422,328],{"class":231},[225,424,425],{"class":266}," — Pinia stores\n",[225,427,429,431,433,436,438],{"class":227,"line":428},23,[225,430,263],{"class":231},[225,432,387],{"class":231},[225,434,435],{"class":331},"/views",[225,437,328],{"class":231},[225,439,440],{"class":266}," — Page-level components\n",[36,442,443],{},"This file helps AI understand your project conventions and generate more accurate suggestions.",[40,445,447],{"id":446},"phase-3-practical-ai-usage-patterns","Phase 3: Practical AI Usage Patterns",[48,449,451],{"id":450},"pattern-1-generating-composables-with-ai","Pattern 1: Generating Composables with AI",[36,453,454],{},[60,455,456],{},"Prompt Example:",[216,458,463],{"className":459,"code":461,"language":462},[460],"language-text","Create a Vue 3 composable called `useDebounce` that:\n- Takes a callback function and delay in ms\n- Returns a debounced version of the function\n- Properly cleans up on component unmount\n- Uses TypeScript with proper generic types\n","text",[211,464,461],{"__ignoreMap":221},[36,466,467],{},[60,468,469],{},"AI-Generated Result:",[216,471,475],{"className":472,"code":473,"language":474,"meta":221,"style":221},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// composables/useDebounce.ts\nimport { ref, onUnmounted } from \"vue\";\n\nexport function useDebounce\u003CT extends (...args: any[]) => any>(\n  fn: T,\n  delay: number = 300,\n) {\n  const timeoutId = ref\u003CNodeJS.Timeout | null>(null);\n\n  const debouncedFn = (...args: Parameters\u003CT>) => {\n    if (timeoutId.value) {\n      clearTimeout(timeoutId.value);\n    }\n\n    timeoutId.value = setTimeout(() => {\n      fn(...args);\n    }, delay);\n  };\n\n  onUnmounted(() => {\n    if (timeoutId.value) {\n      clearTimeout(timeoutId.value);\n    }\n  });\n\n  return debouncedFn;\n}\n","ts",[211,476,477,483,519,523,571,584,603,610,653,657,686,708,725,730,734,757,773,785,790,794,807,823,839,843,853,858,868],{"__ignoreMap":221},[225,478,479],{"class":227,"line":228},[225,480,482],{"class":481},"sHwdD","// composables/useDebounce.ts\n",[225,484,485,489,492,495,498,501,504,507,510,513,516],{"class":227,"line":239},[225,486,488],{"class":487},"s7zQu","import",[225,490,491],{"class":231}," {",[225,493,494],{"class":266}," ref",[225,496,497],{"class":231},",",[225,499,500],{"class":266}," onUnmounted",[225,502,503],{"class":231}," }",[225,505,506],{"class":487}," from",[225,508,509],{"class":231}," \"",[225,511,512],{"class":331},"vue",[225,514,515],{"class":231},"\"",[225,517,518],{"class":231},";\n",[225,520,521],{"class":227,"line":246},[225,522,243],{"emptyLinePlaceholder":242},[225,524,525,528,532,536,539,542,545,548,552,554,557,560,563,566,568],{"class":227,"line":255},[225,526,527],{"class":487},"export",[225,529,531],{"class":530},"spNyl"," function",[225,533,535],{"class":534},"s2Zo4"," useDebounce",[225,537,538],{"class":231},"\u003C",[225,540,541],{"class":235},"T",[225,543,544],{"class":530}," extends",[225,546,547],{"class":231}," (...",[225,549,551],{"class":550},"sHdIc","args",[225,553,214],{"class":231},[225,555,556],{"class":235}," any",[225,558,559],{"class":266},"[]",[225,561,562],{"class":231},")",[225,564,565],{"class":530}," =>",[225,567,556],{"class":235},[225,569,570],{"class":231},">(\n",[225,572,573,576,578,581],{"class":227,"line":260},[225,574,575],{"class":550},"  fn",[225,577,214],{"class":231},[225,579,580],{"class":235}," T",[225,582,583],{"class":231},",\n",[225,585,586,589,591,594,597,601],{"class":227,"line":270},[225,587,588],{"class":550},"  delay",[225,590,214],{"class":231},[225,592,593],{"class":235}," number",[225,595,596],{"class":231}," =",[225,598,600],{"class":599},"sbssI"," 300",[225,602,583],{"class":231},[225,604,605,607],{"class":227,"line":278},[225,606,562],{"class":231},[225,608,609],{"class":231}," {\n",[225,611,612,615,618,620,622,624,627,630,633,636,639,642,646,649,651],{"class":227,"line":286},[225,613,614],{"class":530},"  const",[225,616,617],{"class":266}," timeoutId",[225,619,596],{"class":231},[225,621,494],{"class":534},[225,623,538],{"class":231},[225,625,626],{"class":235},"NodeJS",[225,628,629],{"class":231},".",[225,631,632],{"class":235},"Timeout",[225,634,635],{"class":231}," |",[225,637,638],{"class":235}," null",[225,640,641],{"class":231},">",[225,643,645],{"class":644},"swJcz","(",[225,647,648],{"class":231},"null",[225,650,562],{"class":644},[225,652,518],{"class":231},[225,654,655],{"class":227,"line":294},[225,656,243],{"emptyLinePlaceholder":242},[225,658,659,661,664,666,668,670,672,675,677,679,682,684],{"class":227,"line":302},[225,660,614],{"class":530},[225,662,663],{"class":266}," debouncedFn",[225,665,596],{"class":231},[225,667,547],{"class":231},[225,669,551],{"class":550},[225,671,214],{"class":231},[225,673,674],{"class":235}," Parameters",[225,676,538],{"class":231},[225,678,541],{"class":235},[225,680,681],{"class":231},">)",[225,683,565],{"class":530},[225,685,609],{"class":231},[225,687,688,691,694,697,699,702,705],{"class":227,"line":307},[225,689,690],{"class":487},"    if",[225,692,693],{"class":644}," (",[225,695,696],{"class":266},"timeoutId",[225,698,629],{"class":231},[225,700,701],{"class":266},"value",[225,703,704],{"class":644},") ",[225,706,707],{"class":231},"{\n",[225,709,710,713,715,717,719,721,723],{"class":227,"line":315},[225,711,712],{"class":534},"      clearTimeout",[225,714,645],{"class":644},[225,716,696],{"class":266},[225,718,629],{"class":231},[225,720,701],{"class":266},[225,722,562],{"class":644},[225,724,518],{"class":231},[225,726,727],{"class":227,"line":320},[225,728,729],{"class":231},"    }\n",[225,731,732],{"class":227,"line":340},[225,733,243],{"emptyLinePlaceholder":242},[225,735,736,739,741,743,745,748,750,753,755],{"class":227,"line":348},[225,737,738],{"class":266},"    timeoutId",[225,740,629],{"class":231},[225,742,701],{"class":266},[225,744,596],{"class":231},[225,746,747],{"class":534}," setTimeout",[225,749,645],{"class":644},[225,751,752],{"class":231},"()",[225,754,565],{"class":530},[225,756,609],{"class":231},[225,758,759,762,764,767,769,771],{"class":227,"line":356},[225,760,761],{"class":534},"      fn",[225,763,645],{"class":644},[225,765,766],{"class":231},"...",[225,768,551],{"class":266},[225,770,562],{"class":644},[225,772,518],{"class":231},[225,774,775,778,781,783],{"class":227,"line":364},[225,776,777],{"class":231},"    },",[225,779,780],{"class":266}," delay",[225,782,562],{"class":644},[225,784,518],{"class":231},[225,786,787],{"class":227,"line":369},[225,788,789],{"class":231},"  };\n",[225,791,792],{"class":227,"line":377},[225,793,243],{"emptyLinePlaceholder":242},[225,795,796,799,801,803,805],{"class":227,"line":382},[225,797,798],{"class":534},"  onUnmounted",[225,800,645],{"class":644},[225,802,752],{"class":231},[225,804,565],{"class":530},[225,806,609],{"class":231},[225,808,809,811,813,815,817,819,821],{"class":227,"line":398},[225,810,690],{"class":487},[225,812,693],{"class":644},[225,814,696],{"class":266},[225,816,629],{"class":231},[225,818,701],{"class":266},[225,820,704],{"class":644},[225,822,707],{"class":231},[225,824,825,827,829,831,833,835,837],{"class":227,"line":413},[225,826,712],{"class":534},[225,828,645],{"class":644},[225,830,696],{"class":266},[225,832,629],{"class":231},[225,834,701],{"class":266},[225,836,562],{"class":644},[225,838,518],{"class":231},[225,840,841],{"class":227,"line":428},[225,842,729],{"class":231},[225,844,846,849,851],{"class":227,"line":845},24,[225,847,848],{"class":231},"  }",[225,850,562],{"class":644},[225,852,518],{"class":231},[225,854,856],{"class":227,"line":855},25,[225,857,243],{"emptyLinePlaceholder":242},[225,859,861,864,866],{"class":227,"line":860},26,[225,862,863],{"class":487},"  return",[225,865,663],{"class":266},[225,867,518],{"class":231},[225,869,871],{"class":227,"line":870},27,[225,872,873],{"class":231},"}\n",[36,875,876],{},[60,877,878],{},"✅ What to Check:",[53,880,881,884,890],{},[56,882,883],{},"Type safety is correct",[56,885,886,887],{},"Cleanup happens in ",[211,888,889],{},"onUnmounted",[56,891,892],{},"Function signature matches expectations",[48,894,896],{"id":895},"pattern-2-component-scaffolding","Pattern 2: Component Scaffolding",[36,898,899],{},[60,900,456],{},[216,902,905],{"className":903,"code":904,"language":462},[460],"Create a Vue 3 component called `SearchBar` with:\n- TypeScript + script setup\n- Props: placeholder (string), modelValue (string)\n- Emits: update:modelValue, search\n- Debounced search with 300ms delay\n- Clear button that appears when input has value\n- Accessible with proper ARIA labels\n",[211,906,904],{"__ignoreMap":221},[36,908,909],{},[60,910,911],{},"AI-Generated Component:",[216,913,916],{"className":914,"code":915,"language":512,"meta":221,"style":221},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- components/SearchBar.vue -->\n\u003Cscript setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useDebounce } from \"@/composables/useDebounce\";\n\ninterface Props {\n  placeholder?: string;\n  modelValue: string;\n}\n\ninterface Emits {\n  (e: \"update:modelValue\", value: string): void;\n  (e: \"search\", value: string): void;\n}\n\nconst props = withDefaults(defineProps\u003CProps>(), {\n  placeholder: \"Search...\",\n});\n\nconst emit = defineEmits\u003CEmits>();\n\nconst hasValue = computed(() => props.modelValue.length > 0);\n\nconst debouncedSearch = useDebounce((value: string) => {\n  emit(\"search\", value);\n}, 300);\n\nconst handleInput = (event: Event) => {\n  const value = (event.target as HTMLInputElement).value;\n  emit(\"update:modelValue\", value);\n  debouncedSearch(value);\n};\n\nconst clearSearch = () => {\n  emit(\"update:modelValue\", \"\");\n  emit(\"search\", \"\");\n};\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"search-bar\">\n    \u003Cinput\n      type=\"search\"\n      :value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      @input=\"handleInput\"\n      aria-label=\"Search input\"\n      class=\"search-input\"\n    />\n    \u003Cbutton\n      v-if=\"hasValue\"\n      @click=\"clearSearch\"\n      aria-label=\"Clear search\"\n      class=\"clear-button\"\n    >\n      ×\n    \u003C/button>\n  \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.search-bar {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.search-input {\n  width: 100%;\n  padding: 0.5rem 2rem 0.5rem 0.75rem;\n  border: 1px solid #e2e8f0;\n  border-radius: 0.375rem;\n  font-size: 0.875rem;\n}\n\n.clear-button {\n  position: absolute;\n  right: 0.5rem;\n  background: none;\n  border: none;\n  font-size: 1.5rem;\n  cursor: pointer;\n  color: #64748b;\n}\n\u003C/style>\n",[211,917,918,923,948,969,990,994,1004,1017,1028,1032,1036,1045,1079,1108,1112,1116,1147,1162,1171,1175,1198,1202,1241,1245,1272,1293,1304,1308,1334,1366,1387,1401,1407,1412,1429,1451,1472,1477,1487,1492,1502,1525,1534,1549,1563,1578,1593,1608,1623,1629,1637,1652,1667,1681,1695,1701,1707,1718,1728,1737,1742,1755,1764,1778,1791,1804,1809,1814,1823,1836,1857,1879,1892,1905,1910,1915,1924,1936,1948,1961,1972,1984,1997,2013,2018],{"__ignoreMap":221},[225,919,920],{"class":227,"line":228},[225,921,922],{"class":481},"\u003C!-- components/SearchBar.vue -->\n",[225,924,925,927,930,933,936,939,941,943,945],{"class":227,"line":239},[225,926,538],{"class":231},[225,928,929],{"class":644},"script",[225,931,932],{"class":530}," setup",[225,934,935],{"class":530}," lang",[225,937,938],{"class":231},"=",[225,940,515],{"class":231},[225,942,474],{"class":331},[225,944,515],{"class":231},[225,946,947],{"class":231},">\n",[225,949,950,952,954,957,959,961,963,965,967],{"class":227,"line":246},[225,951,488],{"class":487},[225,953,491],{"class":231},[225,955,956],{"class":266}," computed",[225,958,503],{"class":231},[225,960,506],{"class":487},[225,962,509],{"class":231},[225,964,512],{"class":331},[225,966,515],{"class":231},[225,968,518],{"class":231},[225,970,971,973,975,977,979,981,983,986,988],{"class":227,"line":255},[225,972,488],{"class":487},[225,974,491],{"class":231},[225,976,535],{"class":266},[225,978,503],{"class":231},[225,980,506],{"class":487},[225,982,509],{"class":231},[225,984,985],{"class":331},"@/composables/useDebounce",[225,987,515],{"class":231},[225,989,518],{"class":231},[225,991,992],{"class":227,"line":260},[225,993,243],{"emptyLinePlaceholder":242},[225,995,996,999,1002],{"class":227,"line":270},[225,997,998],{"class":530},"interface",[225,1000,1001],{"class":235}," Props",[225,1003,609],{"class":231},[225,1005,1006,1009,1012,1015],{"class":227,"line":278},[225,1007,1008],{"class":644},"  placeholder",[225,1010,1011],{"class":231},"?:",[225,1013,1014],{"class":235}," string",[225,1016,518],{"class":231},[225,1018,1019,1022,1024,1026],{"class":227,"line":286},[225,1020,1021],{"class":644},"  modelValue",[225,1023,214],{"class":231},[225,1025,1014],{"class":235},[225,1027,518],{"class":231},[225,1029,1030],{"class":227,"line":294},[225,1031,873],{"class":231},[225,1033,1034],{"class":227,"line":302},[225,1035,243],{"emptyLinePlaceholder":242},[225,1037,1038,1040,1043],{"class":227,"line":307},[225,1039,998],{"class":530},[225,1041,1042],{"class":235}," Emits",[225,1044,609],{"class":231},[225,1046,1047,1050,1053,1055,1057,1060,1062,1064,1067,1069,1071,1074,1077],{"class":227,"line":315},[225,1048,1049],{"class":231},"  (",[225,1051,1052],{"class":550},"e",[225,1054,214],{"class":231},[225,1056,509],{"class":231},[225,1058,1059],{"class":331},"update:modelValue",[225,1061,515],{"class":231},[225,1063,497],{"class":231},[225,1065,1066],{"class":550}," value",[225,1068,214],{"class":231},[225,1070,1014],{"class":235},[225,1072,1073],{"class":231},"):",[225,1075,1076],{"class":235}," void",[225,1078,518],{"class":231},[225,1080,1081,1083,1085,1087,1089,1092,1094,1096,1098,1100,1102,1104,1106],{"class":227,"line":320},[225,1082,1049],{"class":231},[225,1084,1052],{"class":550},[225,1086,214],{"class":231},[225,1088,509],{"class":231},[225,1090,1091],{"class":331},"search",[225,1093,515],{"class":231},[225,1095,497],{"class":231},[225,1097,1066],{"class":550},[225,1099,214],{"class":231},[225,1101,1014],{"class":235},[225,1103,1073],{"class":231},[225,1105,1076],{"class":235},[225,1107,518],{"class":231},[225,1109,1110],{"class":227,"line":340},[225,1111,873],{"class":231},[225,1113,1114],{"class":227,"line":348},[225,1115,243],{"emptyLinePlaceholder":242},[225,1117,1118,1121,1124,1126,1129,1131,1134,1136,1139,1141,1143,1145],{"class":227,"line":356},[225,1119,1120],{"class":530},"const",[225,1122,1123],{"class":266}," props ",[225,1125,938],{"class":231},[225,1127,1128],{"class":534}," withDefaults",[225,1130,645],{"class":266},[225,1132,1133],{"class":534},"defineProps",[225,1135,538],{"class":231},[225,1137,1138],{"class":235},"Props",[225,1140,641],{"class":231},[225,1142,752],{"class":266},[225,1144,497],{"class":231},[225,1146,609],{"class":231},[225,1148,1149,1151,1153,1155,1158,1160],{"class":227,"line":364},[225,1150,1008],{"class":644},[225,1152,214],{"class":231},[225,1154,509],{"class":231},[225,1156,1157],{"class":331},"Search...",[225,1159,515],{"class":231},[225,1161,583],{"class":231},[225,1163,1164,1167,1169],{"class":227,"line":369},[225,1165,1166],{"class":231},"}",[225,1168,562],{"class":266},[225,1170,518],{"class":231},[225,1172,1173],{"class":227,"line":377},[225,1174,243],{"emptyLinePlaceholder":242},[225,1176,1177,1179,1182,1184,1187,1189,1192,1194,1196],{"class":227,"line":382},[225,1178,1120],{"class":530},[225,1180,1181],{"class":266}," emit ",[225,1183,938],{"class":231},[225,1185,1186],{"class":534}," defineEmits",[225,1188,538],{"class":231},[225,1190,1191],{"class":235},"Emits",[225,1193,641],{"class":231},[225,1195,752],{"class":266},[225,1197,518],{"class":231},[225,1199,1200],{"class":227,"line":398},[225,1201,243],{"emptyLinePlaceholder":242},[225,1203,1204,1206,1209,1211,1213,1215,1217,1219,1222,1224,1227,1229,1232,1234,1237,1239],{"class":227,"line":413},[225,1205,1120],{"class":530},[225,1207,1208],{"class":266}," hasValue ",[225,1210,938],{"class":231},[225,1212,956],{"class":534},[225,1214,645],{"class":266},[225,1216,752],{"class":231},[225,1218,565],{"class":530},[225,1220,1221],{"class":266}," props",[225,1223,629],{"class":231},[225,1225,1226],{"class":266},"modelValue",[225,1228,629],{"class":231},[225,1230,1231],{"class":266},"length ",[225,1233,641],{"class":231},[225,1235,1236],{"class":599}," 0",[225,1238,562],{"class":266},[225,1240,518],{"class":231},[225,1242,1243],{"class":227,"line":428},[225,1244,243],{"emptyLinePlaceholder":242},[225,1246,1247,1249,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270],{"class":227,"line":845},[225,1248,1120],{"class":530},[225,1250,1251],{"class":266}," debouncedSearch ",[225,1253,938],{"class":231},[225,1255,535],{"class":534},[225,1257,645],{"class":266},[225,1259,645],{"class":231},[225,1261,701],{"class":550},[225,1263,214],{"class":231},[225,1265,1014],{"class":235},[225,1267,562],{"class":231},[225,1269,565],{"class":530},[225,1271,609],{"class":231},[225,1273,1274,1277,1279,1281,1283,1285,1287,1289,1291],{"class":227,"line":855},[225,1275,1276],{"class":534},"  emit",[225,1278,645],{"class":644},[225,1280,515],{"class":231},[225,1282,1091],{"class":331},[225,1284,515],{"class":231},[225,1286,497],{"class":231},[225,1288,1066],{"class":266},[225,1290,562],{"class":644},[225,1292,518],{"class":231},[225,1294,1295,1298,1300,1302],{"class":227,"line":860},[225,1296,1297],{"class":231},"},",[225,1299,600],{"class":599},[225,1301,562],{"class":266},[225,1303,518],{"class":231},[225,1305,1306],{"class":227,"line":870},[225,1307,243],{"emptyLinePlaceholder":242},[225,1309,1311,1313,1316,1318,1320,1323,1325,1328,1330,1332],{"class":227,"line":1310},28,[225,1312,1120],{"class":530},[225,1314,1315],{"class":266}," handleInput ",[225,1317,938],{"class":231},[225,1319,693],{"class":231},[225,1321,1322],{"class":550},"event",[225,1324,214],{"class":231},[225,1326,1327],{"class":235}," Event",[225,1329,562],{"class":231},[225,1331,565],{"class":530},[225,1333,609],{"class":231},[225,1335,1337,1339,1341,1343,1345,1347,1349,1352,1355,1358,1360,1362,1364],{"class":227,"line":1336},29,[225,1338,614],{"class":530},[225,1340,1066],{"class":266},[225,1342,596],{"class":231},[225,1344,693],{"class":644},[225,1346,1322],{"class":266},[225,1348,629],{"class":231},[225,1350,1351],{"class":266},"target",[225,1353,1354],{"class":487}," as",[225,1356,1357],{"class":235}," HTMLInputElement",[225,1359,562],{"class":644},[225,1361,629],{"class":231},[225,1363,701],{"class":266},[225,1365,518],{"class":231},[225,1367,1369,1371,1373,1375,1377,1379,1381,1383,1385],{"class":227,"line":1368},30,[225,1370,1276],{"class":534},[225,1372,645],{"class":644},[225,1374,515],{"class":231},[225,1376,1059],{"class":331},[225,1378,515],{"class":231},[225,1380,497],{"class":231},[225,1382,1066],{"class":266},[225,1384,562],{"class":644},[225,1386,518],{"class":231},[225,1388,1390,1393,1395,1397,1399],{"class":227,"line":1389},31,[225,1391,1392],{"class":534},"  debouncedSearch",[225,1394,645],{"class":644},[225,1396,701],{"class":266},[225,1398,562],{"class":644},[225,1400,518],{"class":231},[225,1402,1404],{"class":227,"line":1403},32,[225,1405,1406],{"class":231},"};\n",[225,1408,1410],{"class":227,"line":1409},33,[225,1411,243],{"emptyLinePlaceholder":242},[225,1413,1415,1417,1420,1422,1425,1427],{"class":227,"line":1414},34,[225,1416,1120],{"class":530},[225,1418,1419],{"class":266}," clearSearch ",[225,1421,938],{"class":231},[225,1423,1424],{"class":231}," ()",[225,1426,565],{"class":530},[225,1428,609],{"class":231},[225,1430,1432,1434,1436,1438,1440,1442,1444,1447,1449],{"class":227,"line":1431},35,[225,1433,1276],{"class":534},[225,1435,645],{"class":644},[225,1437,515],{"class":231},[225,1439,1059],{"class":331},[225,1441,515],{"class":231},[225,1443,497],{"class":231},[225,1445,1446],{"class":231}," \"\"",[225,1448,562],{"class":644},[225,1450,518],{"class":231},[225,1452,1454,1456,1458,1460,1462,1464,1466,1468,1470],{"class":227,"line":1453},36,[225,1455,1276],{"class":534},[225,1457,645],{"class":644},[225,1459,515],{"class":231},[225,1461,1091],{"class":331},[225,1463,515],{"class":231},[225,1465,497],{"class":231},[225,1467,1446],{"class":231},[225,1469,562],{"class":644},[225,1471,518],{"class":231},[225,1473,1475],{"class":227,"line":1474},37,[225,1476,1406],{"class":231},[225,1478,1480,1483,1485],{"class":227,"line":1479},38,[225,1481,1482],{"class":231},"\u003C/",[225,1484,929],{"class":644},[225,1486,947],{"class":231},[225,1488,1490],{"class":227,"line":1489},39,[225,1491,243],{"emptyLinePlaceholder":242},[225,1493,1495,1497,1500],{"class":227,"line":1494},40,[225,1496,538],{"class":231},[225,1498,1499],{"class":644},"template",[225,1501,947],{"class":231},[225,1503,1505,1508,1511,1514,1516,1518,1521,1523],{"class":227,"line":1504},41,[225,1506,1507],{"class":231},"  \u003C",[225,1509,1510],{"class":644},"div",[225,1512,1513],{"class":530}," class",[225,1515,938],{"class":231},[225,1517,515],{"class":231},[225,1519,1520],{"class":331},"search-bar",[225,1522,515],{"class":231},[225,1524,947],{"class":231},[225,1526,1528,1531],{"class":227,"line":1527},42,[225,1529,1530],{"class":231},"    \u003C",[225,1532,1533],{"class":644},"input\n",[225,1535,1537,1540,1542,1544,1546],{"class":227,"line":1536},43,[225,1538,1539],{"class":530},"      type",[225,1541,938],{"class":231},[225,1543,515],{"class":231},[225,1545,1091],{"class":331},[225,1547,1548],{"class":231},"\"\n",[225,1550,1552,1555,1557,1559,1561],{"class":227,"line":1551},44,[225,1553,1554],{"class":530},"      :value",[225,1556,938],{"class":231},[225,1558,515],{"class":231},[225,1560,1226],{"class":331},[225,1562,1548],{"class":231},[225,1564,1566,1569,1571,1573,1576],{"class":227,"line":1565},45,[225,1567,1568],{"class":530},"      :placeholder",[225,1570,938],{"class":231},[225,1572,515],{"class":231},[225,1574,1575],{"class":331},"placeholder",[225,1577,1548],{"class":231},[225,1579,1581,1584,1586,1588,1591],{"class":227,"line":1580},46,[225,1582,1583],{"class":530},"      @input",[225,1585,938],{"class":231},[225,1587,515],{"class":231},[225,1589,1590],{"class":331},"handleInput",[225,1592,1548],{"class":231},[225,1594,1596,1599,1601,1603,1606],{"class":227,"line":1595},47,[225,1597,1598],{"class":530},"      aria-label",[225,1600,938],{"class":231},[225,1602,515],{"class":231},[225,1604,1605],{"class":331},"Search input",[225,1607,1548],{"class":231},[225,1609,1611,1614,1616,1618,1621],{"class":227,"line":1610},48,[225,1612,1613],{"class":530},"      class",[225,1615,938],{"class":231},[225,1617,515],{"class":231},[225,1619,1620],{"class":331},"search-input",[225,1622,1548],{"class":231},[225,1624,1626],{"class":227,"line":1625},49,[225,1627,1628],{"class":231},"    />\n",[225,1630,1632,1634],{"class":227,"line":1631},50,[225,1633,1530],{"class":231},[225,1635,1636],{"class":644},"button\n",[225,1638,1640,1643,1645,1647,1650],{"class":227,"line":1639},51,[225,1641,1642],{"class":530},"      v-if",[225,1644,938],{"class":231},[225,1646,515],{"class":231},[225,1648,1649],{"class":331},"hasValue",[225,1651,1548],{"class":231},[225,1653,1655,1658,1660,1662,1665],{"class":227,"line":1654},52,[225,1656,1657],{"class":530},"      @click",[225,1659,938],{"class":231},[225,1661,515],{"class":231},[225,1663,1664],{"class":331},"clearSearch",[225,1666,1548],{"class":231},[225,1668,1670,1672,1674,1676,1679],{"class":227,"line":1669},53,[225,1671,1598],{"class":530},[225,1673,938],{"class":231},[225,1675,515],{"class":231},[225,1677,1678],{"class":331},"Clear search",[225,1680,1548],{"class":231},[225,1682,1684,1686,1688,1690,1693],{"class":227,"line":1683},54,[225,1685,1613],{"class":530},[225,1687,938],{"class":231},[225,1689,515],{"class":231},[225,1691,1692],{"class":331},"clear-button",[225,1694,1548],{"class":231},[225,1696,1698],{"class":227,"line":1697},55,[225,1699,1700],{"class":231},"    >\n",[225,1702,1704],{"class":227,"line":1703},56,[225,1705,1706],{"class":266},"      ×\n",[225,1708,1710,1713,1716],{"class":227,"line":1709},57,[225,1711,1712],{"class":231},"    \u003C/",[225,1714,1715],{"class":644},"button",[225,1717,947],{"class":231},[225,1719,1721,1724,1726],{"class":227,"line":1720},58,[225,1722,1723],{"class":231},"  \u003C/",[225,1725,1510],{"class":644},[225,1727,947],{"class":231},[225,1729,1731,1733,1735],{"class":227,"line":1730},59,[225,1732,1482],{"class":231},[225,1734,1499],{"class":644},[225,1736,947],{"class":231},[225,1738,1740],{"class":227,"line":1739},60,[225,1741,243],{"emptyLinePlaceholder":242},[225,1743,1745,1747,1750,1753],{"class":227,"line":1744},61,[225,1746,538],{"class":231},[225,1748,1749],{"class":644},"style",[225,1751,1752],{"class":530}," scoped",[225,1754,947],{"class":231},[225,1756,1758,1760,1762],{"class":227,"line":1757},62,[225,1759,629],{"class":231},[225,1761,1520],{"class":235},[225,1763,609],{"class":231},[225,1765,1767,1771,1773,1776],{"class":227,"line":1766},63,[225,1768,1770],{"class":1769},"sqsOY","  position",[225,1772,214],{"class":231},[225,1774,1775],{"class":266}," relative",[225,1777,518],{"class":231},[225,1779,1781,1784,1786,1789],{"class":227,"line":1780},64,[225,1782,1783],{"class":1769},"  display",[225,1785,214],{"class":231},[225,1787,1788],{"class":266}," flex",[225,1790,518],{"class":231},[225,1792,1794,1797,1799,1802],{"class":227,"line":1793},65,[225,1795,1796],{"class":1769},"  align-items",[225,1798,214],{"class":231},[225,1800,1801],{"class":266}," center",[225,1803,518],{"class":231},[225,1805,1807],{"class":227,"line":1806},66,[225,1808,873],{"class":231},[225,1810,1812],{"class":227,"line":1811},67,[225,1813,243],{"emptyLinePlaceholder":242},[225,1815,1817,1819,1821],{"class":227,"line":1816},68,[225,1818,629],{"class":231},[225,1820,1620],{"class":235},[225,1822,609],{"class":231},[225,1824,1826,1829,1831,1834],{"class":227,"line":1825},69,[225,1827,1828],{"class":1769},"  width",[225,1830,214],{"class":231},[225,1832,1833],{"class":599}," 100%",[225,1835,518],{"class":231},[225,1837,1839,1842,1844,1847,1850,1852,1855],{"class":227,"line":1838},70,[225,1840,1841],{"class":1769},"  padding",[225,1843,214],{"class":231},[225,1845,1846],{"class":599}," 0.5rem",[225,1848,1849],{"class":599}," 2rem",[225,1851,1846],{"class":599},[225,1853,1854],{"class":599}," 0.75rem",[225,1856,518],{"class":231},[225,1858,1860,1863,1865,1868,1871,1874,1877],{"class":227,"line":1859},71,[225,1861,1862],{"class":1769},"  border",[225,1864,214],{"class":231},[225,1866,1867],{"class":599}," 1px",[225,1869,1870],{"class":266}," solid ",[225,1872,1873],{"class":231},"#",[225,1875,1876],{"class":266},"e2e8f0",[225,1878,518],{"class":231},[225,1880,1882,1885,1887,1890],{"class":227,"line":1881},72,[225,1883,1884],{"class":1769},"  border-radius",[225,1886,214],{"class":231},[225,1888,1889],{"class":599}," 0.375rem",[225,1891,518],{"class":231},[225,1893,1895,1898,1900,1903],{"class":227,"line":1894},73,[225,1896,1897],{"class":1769},"  font-size",[225,1899,214],{"class":231},[225,1901,1902],{"class":599}," 0.875rem",[225,1904,518],{"class":231},[225,1906,1908],{"class":227,"line":1907},74,[225,1909,873],{"class":231},[225,1911,1913],{"class":227,"line":1912},75,[225,1914,243],{"emptyLinePlaceholder":242},[225,1916,1918,1920,1922],{"class":227,"line":1917},76,[225,1919,629],{"class":231},[225,1921,1692],{"class":235},[225,1923,609],{"class":231},[225,1925,1927,1929,1931,1934],{"class":227,"line":1926},77,[225,1928,1770],{"class":1769},[225,1930,214],{"class":231},[225,1932,1933],{"class":266}," absolute",[225,1935,518],{"class":231},[225,1937,1939,1942,1944,1946],{"class":227,"line":1938},78,[225,1940,1941],{"class":1769},"  right",[225,1943,214],{"class":231},[225,1945,1846],{"class":599},[225,1947,518],{"class":231},[225,1949,1951,1954,1956,1959],{"class":227,"line":1950},79,[225,1952,1953],{"class":1769},"  background",[225,1955,214],{"class":231},[225,1957,1958],{"class":266}," none",[225,1960,518],{"class":231},[225,1962,1964,1966,1968,1970],{"class":227,"line":1963},80,[225,1965,1862],{"class":1769},[225,1967,214],{"class":231},[225,1969,1958],{"class":266},[225,1971,518],{"class":231},[225,1973,1975,1977,1979,1982],{"class":227,"line":1974},81,[225,1976,1897],{"class":1769},[225,1978,214],{"class":231},[225,1980,1981],{"class":599}," 1.5rem",[225,1983,518],{"class":231},[225,1985,1987,1990,1992,1995],{"class":227,"line":1986},82,[225,1988,1989],{"class":1769},"  cursor",[225,1991,214],{"class":231},[225,1993,1994],{"class":266}," pointer",[225,1996,518],{"class":231},[225,1998,2000,2003,2005,2008,2011],{"class":227,"line":1999},83,[225,2001,2002],{"class":1769},"  color",[225,2004,214],{"class":231},[225,2006,2007],{"class":231}," #",[225,2009,2010],{"class":266},"64748b",[225,2012,518],{"class":231},[225,2014,2016],{"class":227,"line":2015},84,[225,2017,873],{"class":231},[225,2019,2021,2023,2025],{"class":227,"line":2020},85,[225,2022,1482],{"class":231},[225,2024,1749],{"class":644},[225,2026,947],{"class":231},[36,2028,2029],{},[60,2030,2031],{},"✅ Human Review Checklist:",[53,2033,2036,2045,2051,2057,2063],{"className":2034},[2035],"contains-task-list",[56,2037,2040,2044],{"className":2038},[2039],"task-list-item",[2041,2042],"input",{"disabled":242,"type":2043},"checkbox"," Props and emits are properly typed",[56,2046,2048,2050],{"className":2047},[2039],[2041,2049],{"disabled":242,"type":2043}," v-model pattern is correctly implemented",[56,2052,2054,2056],{"className":2053},[2039],[2041,2055],{"disabled":242,"type":2043}," Accessibility attributes are present",[56,2058,2060,2062],{"className":2059},[2039],[2041,2061],{"disabled":242,"type":2043}," Debounce cleanup happens correctly",[56,2064,2066,2068],{"className":2065},[2039],[2041,2067],{"disabled":242,"type":2043}," Styles match design system",[48,2070,2072],{"id":2071},"pattern-3-using-ai-agents-for-refactoring","Pattern 3: Using AI Agents for Refactoring",[36,2074,2075],{},"AI agents (like Claude Code) can handle multi-file refactoring tasks that would be tedious manually.",[36,2077,2078],{},[60,2079,2080],{},"Example Task:",[216,2082,2085],{"className":2083,"code":2084,"language":462},[460],"Convert all components in /components/legacy from Options API to Composition API:\n1. Maintain exact same functionality\n2. Use TypeScript with proper types\n3. Extract reusable logic into composables\n4. Add unit tests for each refactored component\n",[211,2086,2084],{"__ignoreMap":221},[36,2088,2089],{},[60,2090,2091],{},"Agent Workflow:",[2093,2094,2095,2101,2107,2113],"ol",{},[56,2096,2097,2100],{},[60,2098,2099],{},"Analysis Phase"," — Agent reads all files and identifies patterns",[56,2102,2103,2106],{},[60,2104,2105],{},"Planning Phase"," — Creates refactoring plan for review",[56,2108,2109,2112],{},[60,2110,2111],{},"Execution Phase"," — Refactors files one by one",[56,2114,2115,2118],{},[60,2116,2117],{},"Validation Phase"," — Runs tests to ensure no regressions",[40,2120,2122],{"id":2121},"phase-4-advanced-techniques","Phase 4: Advanced Techniques",[48,2124,2126],{"id":2125},"technique-1-ai-assisted-state-management","Technique 1: AI-Assisted State Management",[36,2128,2129],{},[60,2130,2131],{},"Prompt:",[216,2133,2136],{"className":2134,"code":2135,"language":462},[460],"Create a Pinia store for user authentication with:\n- TypeScript types\n- Login/logout actions\n- Token refresh logic\n- Persistent state with localStorage\n- Proper error handling\n",[211,2137,2135],{"__ignoreMap":221},[36,2139,2140],{},[60,2141,2142],{},"Generated Store:",[216,2144,2146],{"className":472,"code":2145,"language":474,"meta":221,"style":221},"// stores/auth.ts\nimport { defineStore } from \"pinia\";\nimport { ref, computed } from \"vue\";\nimport type { User, LoginCredentials } from \"@/types\";\n\nexport const useAuthStore = defineStore(\"auth\", () => {\n  const user = ref\u003CUser | null>(null);\n  const token = ref\u003Cstring | null>(localStorage.getItem(\"auth_token\"));\n  const isLoading = ref(false);\n  const error = ref\u003Cstring | null>(null);\n\n  const isAuthenticated = computed(() => !!user.value && !!token.value);\n\n  async function login(credentials: LoginCredentials) {\n    isLoading.value = true;\n    error.value = null;\n\n    try {\n      const response = await fetch(\"/api/auth/login\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify(credentials),\n      });\n\n      if (!response.ok) {\n        throw new Error(\"Login failed\");\n      }\n\n      const data = await response.json();\n      user.value = data.user;\n      token.value = data.token;\n      localStorage.setItem(\"auth_token\", data.token);\n    } catch (e) {\n      error.value = e instanceof Error ? e.message : \"An error occurred\";\n      throw e;\n    } finally {\n      isLoading.value = false;\n    }\n  }\n\n  function logout() {\n    user.value = null;\n    token.value = null;\n    localStorage.removeItem(\"auth_token\");\n  }\n\n  async function refreshToken() {\n    if (!token.value) return;\n\n    try {\n      const response = await fetch(\"/api/auth/refresh\", {\n        headers: { Authorization: `Bearer ${token.value}` },\n      });\n\n      if (!response.ok) {\n        logout();\n        return;\n      }\n\n      const data = await response.json();\n      token.value = data.token;\n      localStorage.setItem(\"auth_token\", data.token);\n    } catch {\n      logout();\n    }\n  }\n\n  return {\n    user,\n    token,\n    isLoading,\n    error,\n    isAuthenticated,\n    login,\n    logout,\n    refreshToken,\n  };\n});\n",[211,2147,2148,2153,2175,2199,2229,2233,2264,2294,2340,2361,2390,2394,2437,2441,2464,2480,2494,2498,2505,2534,2550,2578,2601,2610,2614,2636,2660,2665,2669,2691,2710,2729,2759,2775,2816,2825,2834,2850,2854,2859,2863,2875,2888,2901,2923,2927,2931,2944,2965,2969,2975,3000,3032,3040,3044,3062,3071,3078,3082,3086,3106,3124,3152,3160,3169,3173,3177,3181,3187,3193,3199,3205,3211,3218,3225,3232,3239,3243],{"__ignoreMap":221},[225,2149,2150],{"class":227,"line":228},[225,2151,2152],{"class":481},"// stores/auth.ts\n",[225,2154,2155,2157,2159,2162,2164,2166,2168,2171,2173],{"class":227,"line":239},[225,2156,488],{"class":487},[225,2158,491],{"class":231},[225,2160,2161],{"class":266}," defineStore",[225,2163,503],{"class":231},[225,2165,506],{"class":487},[225,2167,509],{"class":231},[225,2169,2170],{"class":331},"pinia",[225,2172,515],{"class":231},[225,2174,518],{"class":231},[225,2176,2177,2179,2181,2183,2185,2187,2189,2191,2193,2195,2197],{"class":227,"line":246},[225,2178,488],{"class":487},[225,2180,491],{"class":231},[225,2182,494],{"class":266},[225,2184,497],{"class":231},[225,2186,956],{"class":266},[225,2188,503],{"class":231},[225,2190,506],{"class":487},[225,2192,509],{"class":231},[225,2194,512],{"class":331},[225,2196,515],{"class":231},[225,2198,518],{"class":231},[225,2200,2201,2203,2206,2208,2211,2213,2216,2218,2220,2222,2225,2227],{"class":227,"line":255},[225,2202,488],{"class":487},[225,2204,2205],{"class":487}," type",[225,2207,491],{"class":231},[225,2209,2210],{"class":266}," User",[225,2212,497],{"class":231},[225,2214,2215],{"class":266}," LoginCredentials",[225,2217,503],{"class":231},[225,2219,506],{"class":487},[225,2221,509],{"class":231},[225,2223,2224],{"class":331},"@/types",[225,2226,515],{"class":231},[225,2228,518],{"class":231},[225,2230,2231],{"class":227,"line":260},[225,2232,243],{"emptyLinePlaceholder":242},[225,2234,2235,2237,2240,2243,2245,2247,2249,2251,2254,2256,2258,2260,2262],{"class":227,"line":270},[225,2236,527],{"class":487},[225,2238,2239],{"class":530}," const",[225,2241,2242],{"class":266}," useAuthStore ",[225,2244,938],{"class":231},[225,2246,2161],{"class":534},[225,2248,645],{"class":266},[225,2250,515],{"class":231},[225,2252,2253],{"class":331},"auth",[225,2255,515],{"class":231},[225,2257,497],{"class":231},[225,2259,1424],{"class":231},[225,2261,565],{"class":530},[225,2263,609],{"class":231},[225,2265,2266,2268,2271,2273,2275,2277,2280,2282,2284,2286,2288,2290,2292],{"class":227,"line":278},[225,2267,614],{"class":530},[225,2269,2270],{"class":266}," user",[225,2272,596],{"class":231},[225,2274,494],{"class":534},[225,2276,538],{"class":231},[225,2278,2279],{"class":235},"User",[225,2281,635],{"class":231},[225,2283,638],{"class":235},[225,2285,641],{"class":231},[225,2287,645],{"class":644},[225,2289,648],{"class":231},[225,2291,562],{"class":644},[225,2293,518],{"class":231},[225,2295,2296,2298,2301,2303,2305,2307,2310,2312,2314,2316,2318,2321,2323,2326,2328,2330,2333,2335,2338],{"class":227,"line":286},[225,2297,614],{"class":530},[225,2299,2300],{"class":266}," token",[225,2302,596],{"class":231},[225,2304,494],{"class":534},[225,2306,538],{"class":231},[225,2308,2309],{"class":235},"string",[225,2311,635],{"class":231},[225,2313,638],{"class":235},[225,2315,641],{"class":231},[225,2317,645],{"class":644},[225,2319,2320],{"class":266},"localStorage",[225,2322,629],{"class":231},[225,2324,2325],{"class":534},"getItem",[225,2327,645],{"class":644},[225,2329,515],{"class":231},[225,2331,2332],{"class":331},"auth_token",[225,2334,515],{"class":231},[225,2336,2337],{"class":644},"))",[225,2339,518],{"class":231},[225,2341,2342,2344,2347,2349,2351,2353,2357,2359],{"class":227,"line":294},[225,2343,614],{"class":530},[225,2345,2346],{"class":266}," isLoading",[225,2348,596],{"class":231},[225,2350,494],{"class":534},[225,2352,645],{"class":644},[225,2354,2356],{"class":2355},"sfNiH","false",[225,2358,562],{"class":644},[225,2360,518],{"class":231},[225,2362,2363,2365,2368,2370,2372,2374,2376,2378,2380,2382,2384,2386,2388],{"class":227,"line":302},[225,2364,614],{"class":530},[225,2366,2367],{"class":266}," error",[225,2369,596],{"class":231},[225,2371,494],{"class":534},[225,2373,538],{"class":231},[225,2375,2309],{"class":235},[225,2377,635],{"class":231},[225,2379,638],{"class":235},[225,2381,641],{"class":231},[225,2383,645],{"class":644},[225,2385,648],{"class":231},[225,2387,562],{"class":644},[225,2389,518],{"class":231},[225,2391,2392],{"class":227,"line":307},[225,2393,243],{"emptyLinePlaceholder":242},[225,2395,2396,2398,2401,2403,2405,2407,2409,2411,2414,2417,2419,2421,2424,2426,2429,2431,2433,2435],{"class":227,"line":315},[225,2397,614],{"class":530},[225,2399,2400],{"class":266}," isAuthenticated",[225,2402,596],{"class":231},[225,2404,956],{"class":534},[225,2406,645],{"class":644},[225,2408,752],{"class":231},[225,2410,565],{"class":530},[225,2412,2413],{"class":231}," !!",[225,2415,2416],{"class":266},"user",[225,2418,629],{"class":231},[225,2420,701],{"class":266},[225,2422,2423],{"class":231}," &&",[225,2425,2413],{"class":231},[225,2427,2428],{"class":266},"token",[225,2430,629],{"class":231},[225,2432,701],{"class":266},[225,2434,562],{"class":644},[225,2436,518],{"class":231},[225,2438,2439],{"class":227,"line":320},[225,2440,243],{"emptyLinePlaceholder":242},[225,2442,2443,2446,2448,2451,2453,2456,2458,2460,2462],{"class":227,"line":340},[225,2444,2445],{"class":530},"  async",[225,2447,531],{"class":530},[225,2449,2450],{"class":534}," login",[225,2452,645],{"class":231},[225,2454,2455],{"class":550},"credentials",[225,2457,214],{"class":231},[225,2459,2215],{"class":235},[225,2461,562],{"class":231},[225,2463,609],{"class":231},[225,2465,2466,2469,2471,2473,2475,2478],{"class":227,"line":348},[225,2467,2468],{"class":266},"    isLoading",[225,2470,629],{"class":231},[225,2472,701],{"class":266},[225,2474,596],{"class":231},[225,2476,2477],{"class":2355}," true",[225,2479,518],{"class":231},[225,2481,2482,2485,2487,2489,2491],{"class":227,"line":356},[225,2483,2484],{"class":266},"    error",[225,2486,629],{"class":231},[225,2488,701],{"class":266},[225,2490,596],{"class":231},[225,2492,2493],{"class":231}," null;\n",[225,2495,2496],{"class":227,"line":364},[225,2497,243],{"emptyLinePlaceholder":242},[225,2499,2500,2503],{"class":227,"line":369},[225,2501,2502],{"class":487},"    try",[225,2504,609],{"class":231},[225,2506,2507,2510,2513,2515,2518,2521,2523,2525,2528,2530,2532],{"class":227,"line":377},[225,2508,2509],{"class":530},"      const",[225,2511,2512],{"class":266}," response",[225,2514,596],{"class":231},[225,2516,2517],{"class":487}," await",[225,2519,2520],{"class":534}," fetch",[225,2522,645],{"class":644},[225,2524,515],{"class":231},[225,2526,2527],{"class":331},"/api/auth/login",[225,2529,515],{"class":231},[225,2531,497],{"class":231},[225,2533,609],{"class":231},[225,2535,2536,2539,2541,2543,2546,2548],{"class":227,"line":382},[225,2537,2538],{"class":644},"        method",[225,2540,214],{"class":231},[225,2542,509],{"class":231},[225,2544,2545],{"class":331},"POST",[225,2547,515],{"class":231},[225,2549,583],{"class":231},[225,2551,2552,2555,2557,2559,2561,2564,2566,2568,2570,2573,2575],{"class":227,"line":398},[225,2553,2554],{"class":644},"        headers",[225,2556,214],{"class":231},[225,2558,491],{"class":231},[225,2560,509],{"class":231},[225,2562,2563],{"class":644},"Content-Type",[225,2565,515],{"class":231},[225,2567,214],{"class":231},[225,2569,509],{"class":231},[225,2571,2572],{"class":331},"application/json",[225,2574,515],{"class":231},[225,2576,2577],{"class":231}," },\n",[225,2579,2580,2583,2585,2588,2590,2593,2595,2597,2599],{"class":227,"line":413},[225,2581,2582],{"class":644},"        body",[225,2584,214],{"class":231},[225,2586,2587],{"class":266}," JSON",[225,2589,629],{"class":231},[225,2591,2592],{"class":534},"stringify",[225,2594,645],{"class":644},[225,2596,2455],{"class":266},[225,2598,562],{"class":644},[225,2600,583],{"class":231},[225,2602,2603,2606,2608],{"class":227,"line":428},[225,2604,2605],{"class":231},"      }",[225,2607,562],{"class":644},[225,2609,518],{"class":231},[225,2611,2612],{"class":227,"line":845},[225,2613,243],{"emptyLinePlaceholder":242},[225,2615,2616,2619,2621,2624,2627,2629,2632,2634],{"class":227,"line":855},[225,2617,2618],{"class":487},"      if",[225,2620,693],{"class":644},[225,2622,2623],{"class":231},"!",[225,2625,2626],{"class":266},"response",[225,2628,629],{"class":231},[225,2630,2631],{"class":266},"ok",[225,2633,704],{"class":644},[225,2635,707],{"class":231},[225,2637,2638,2641,2644,2647,2649,2651,2654,2656,2658],{"class":227,"line":860},[225,2639,2640],{"class":487},"        throw",[225,2642,2643],{"class":231}," new",[225,2645,2646],{"class":534}," Error",[225,2648,645],{"class":644},[225,2650,515],{"class":231},[225,2652,2653],{"class":331},"Login failed",[225,2655,515],{"class":231},[225,2657,562],{"class":644},[225,2659,518],{"class":231},[225,2661,2662],{"class":227,"line":870},[225,2663,2664],{"class":231},"      }\n",[225,2666,2667],{"class":227,"line":1310},[225,2668,243],{"emptyLinePlaceholder":242},[225,2670,2671,2673,2676,2678,2680,2682,2684,2687,2689],{"class":227,"line":1336},[225,2672,2509],{"class":530},[225,2674,2675],{"class":266}," data",[225,2677,596],{"class":231},[225,2679,2517],{"class":487},[225,2681,2512],{"class":266},[225,2683,629],{"class":231},[225,2685,2686],{"class":534},"json",[225,2688,752],{"class":644},[225,2690,518],{"class":231},[225,2692,2693,2696,2698,2700,2702,2704,2706,2708],{"class":227,"line":1368},[225,2694,2695],{"class":266},"      user",[225,2697,629],{"class":231},[225,2699,701],{"class":266},[225,2701,596],{"class":231},[225,2703,2675],{"class":266},[225,2705,629],{"class":231},[225,2707,2416],{"class":266},[225,2709,518],{"class":231},[225,2711,2712,2715,2717,2719,2721,2723,2725,2727],{"class":227,"line":1389},[225,2713,2714],{"class":266},"      token",[225,2716,629],{"class":231},[225,2718,701],{"class":266},[225,2720,596],{"class":231},[225,2722,2675],{"class":266},[225,2724,629],{"class":231},[225,2726,2428],{"class":266},[225,2728,518],{"class":231},[225,2730,2731,2734,2736,2739,2741,2743,2745,2747,2749,2751,2753,2755,2757],{"class":227,"line":1403},[225,2732,2733],{"class":266},"      localStorage",[225,2735,629],{"class":231},[225,2737,2738],{"class":534},"setItem",[225,2740,645],{"class":644},[225,2742,515],{"class":231},[225,2744,2332],{"class":331},[225,2746,515],{"class":231},[225,2748,497],{"class":231},[225,2750,2675],{"class":266},[225,2752,629],{"class":231},[225,2754,2428],{"class":266},[225,2756,562],{"class":644},[225,2758,518],{"class":231},[225,2760,2761,2764,2767,2769,2771,2773],{"class":227,"line":1409},[225,2762,2763],{"class":231},"    }",[225,2765,2766],{"class":487}," catch",[225,2768,693],{"class":644},[225,2770,1052],{"class":266},[225,2772,704],{"class":644},[225,2774,707],{"class":231},[225,2776,2777,2780,2782,2784,2786,2789,2792,2794,2797,2799,2801,2804,2807,2809,2812,2814],{"class":227,"line":1414},[225,2778,2779],{"class":266},"      error",[225,2781,629],{"class":231},[225,2783,701],{"class":266},[225,2785,596],{"class":231},[225,2787,2788],{"class":266}," e",[225,2790,2791],{"class":231}," instanceof",[225,2793,2646],{"class":235},[225,2795,2796],{"class":231}," ?",[225,2798,2788],{"class":266},[225,2800,629],{"class":231},[225,2802,2803],{"class":266},"message",[225,2805,2806],{"class":231}," :",[225,2808,509],{"class":231},[225,2810,2811],{"class":331},"An error occurred",[225,2813,515],{"class":231},[225,2815,518],{"class":231},[225,2817,2818,2821,2823],{"class":227,"line":1431},[225,2819,2820],{"class":487},"      throw",[225,2822,2788],{"class":266},[225,2824,518],{"class":231},[225,2826,2827,2829,2832],{"class":227,"line":1453},[225,2828,2763],{"class":231},[225,2830,2831],{"class":487}," finally",[225,2833,609],{"class":231},[225,2835,2836,2839,2841,2843,2845,2848],{"class":227,"line":1474},[225,2837,2838],{"class":266},"      isLoading",[225,2840,629],{"class":231},[225,2842,701],{"class":266},[225,2844,596],{"class":231},[225,2846,2847],{"class":2355}," false",[225,2849,518],{"class":231},[225,2851,2852],{"class":227,"line":1479},[225,2853,729],{"class":231},[225,2855,2856],{"class":227,"line":1489},[225,2857,2858],{"class":231},"  }\n",[225,2860,2861],{"class":227,"line":1494},[225,2862,243],{"emptyLinePlaceholder":242},[225,2864,2865,2868,2871,2873],{"class":227,"line":1504},[225,2866,2867],{"class":530},"  function",[225,2869,2870],{"class":534}," logout",[225,2872,752],{"class":231},[225,2874,609],{"class":231},[225,2876,2877,2880,2882,2884,2886],{"class":227,"line":1527},[225,2878,2879],{"class":266},"    user",[225,2881,629],{"class":231},[225,2883,701],{"class":266},[225,2885,596],{"class":231},[225,2887,2493],{"class":231},[225,2889,2890,2893,2895,2897,2899],{"class":227,"line":1536},[225,2891,2892],{"class":266},"    token",[225,2894,629],{"class":231},[225,2896,701],{"class":266},[225,2898,596],{"class":231},[225,2900,2493],{"class":231},[225,2902,2903,2906,2908,2911,2913,2915,2917,2919,2921],{"class":227,"line":1551},[225,2904,2905],{"class":266},"    localStorage",[225,2907,629],{"class":231},[225,2909,2910],{"class":534},"removeItem",[225,2912,645],{"class":644},[225,2914,515],{"class":231},[225,2916,2332],{"class":331},[225,2918,515],{"class":231},[225,2920,562],{"class":644},[225,2922,518],{"class":231},[225,2924,2925],{"class":227,"line":1565},[225,2926,2858],{"class":231},[225,2928,2929],{"class":227,"line":1580},[225,2930,243],{"emptyLinePlaceholder":242},[225,2932,2933,2935,2937,2940,2942],{"class":227,"line":1595},[225,2934,2445],{"class":530},[225,2936,531],{"class":530},[225,2938,2939],{"class":534}," refreshToken",[225,2941,752],{"class":231},[225,2943,609],{"class":231},[225,2945,2946,2948,2950,2952,2954,2956,2958,2960,2963],{"class":227,"line":1610},[225,2947,690],{"class":487},[225,2949,693],{"class":644},[225,2951,2623],{"class":231},[225,2953,2428],{"class":266},[225,2955,629],{"class":231},[225,2957,701],{"class":266},[225,2959,704],{"class":644},[225,2961,2962],{"class":487},"return",[225,2964,518],{"class":231},[225,2966,2967],{"class":227,"line":1625},[225,2968,243],{"emptyLinePlaceholder":242},[225,2970,2971,2973],{"class":227,"line":1631},[225,2972,2502],{"class":487},[225,2974,609],{"class":231},[225,2976,2977,2979,2981,2983,2985,2987,2989,2991,2994,2996,2998],{"class":227,"line":1639},[225,2978,2509],{"class":530},[225,2980,2512],{"class":266},[225,2982,596],{"class":231},[225,2984,2517],{"class":487},[225,2986,2520],{"class":534},[225,2988,645],{"class":644},[225,2990,515],{"class":231},[225,2992,2993],{"class":331},"/api/auth/refresh",[225,2995,515],{"class":231},[225,2997,497],{"class":231},[225,2999,609],{"class":231},[225,3001,3002,3004,3006,3008,3011,3013,3015,3018,3021,3023,3025,3027,3030],{"class":227,"line":1654},[225,3003,2554],{"class":644},[225,3005,214],{"class":231},[225,3007,491],{"class":231},[225,3009,3010],{"class":644}," Authorization",[225,3012,214],{"class":231},[225,3014,387],{"class":231},[225,3016,3017],{"class":331},"Bearer ",[225,3019,3020],{"class":231},"${",[225,3022,2428],{"class":266},[225,3024,629],{"class":231},[225,3026,701],{"class":266},[225,3028,3029],{"class":231},"}`",[225,3031,2577],{"class":231},[225,3033,3034,3036,3038],{"class":227,"line":1669},[225,3035,2605],{"class":231},[225,3037,562],{"class":644},[225,3039,518],{"class":231},[225,3041,3042],{"class":227,"line":1683},[225,3043,243],{"emptyLinePlaceholder":242},[225,3045,3046,3048,3050,3052,3054,3056,3058,3060],{"class":227,"line":1697},[225,3047,2618],{"class":487},[225,3049,693],{"class":644},[225,3051,2623],{"class":231},[225,3053,2626],{"class":266},[225,3055,629],{"class":231},[225,3057,2631],{"class":266},[225,3059,704],{"class":644},[225,3061,707],{"class":231},[225,3063,3064,3067,3069],{"class":227,"line":1703},[225,3065,3066],{"class":534},"        logout",[225,3068,752],{"class":644},[225,3070,518],{"class":231},[225,3072,3073,3076],{"class":227,"line":1709},[225,3074,3075],{"class":487},"        return",[225,3077,518],{"class":231},[225,3079,3080],{"class":227,"line":1720},[225,3081,2664],{"class":231},[225,3083,3084],{"class":227,"line":1730},[225,3085,243],{"emptyLinePlaceholder":242},[225,3087,3088,3090,3092,3094,3096,3098,3100,3102,3104],{"class":227,"line":1739},[225,3089,2509],{"class":530},[225,3091,2675],{"class":266},[225,3093,596],{"class":231},[225,3095,2517],{"class":487},[225,3097,2512],{"class":266},[225,3099,629],{"class":231},[225,3101,2686],{"class":534},[225,3103,752],{"class":644},[225,3105,518],{"class":231},[225,3107,3108,3110,3112,3114,3116,3118,3120,3122],{"class":227,"line":1744},[225,3109,2714],{"class":266},[225,3111,629],{"class":231},[225,3113,701],{"class":266},[225,3115,596],{"class":231},[225,3117,2675],{"class":266},[225,3119,629],{"class":231},[225,3121,2428],{"class":266},[225,3123,518],{"class":231},[225,3125,3126,3128,3130,3132,3134,3136,3138,3140,3142,3144,3146,3148,3150],{"class":227,"line":1757},[225,3127,2733],{"class":266},[225,3129,629],{"class":231},[225,3131,2738],{"class":534},[225,3133,645],{"class":644},[225,3135,515],{"class":231},[225,3137,2332],{"class":331},[225,3139,515],{"class":231},[225,3141,497],{"class":231},[225,3143,2675],{"class":266},[225,3145,629],{"class":231},[225,3147,2428],{"class":266},[225,3149,562],{"class":644},[225,3151,518],{"class":231},[225,3153,3154,3156,3158],{"class":227,"line":1766},[225,3155,2763],{"class":231},[225,3157,2766],{"class":487},[225,3159,609],{"class":231},[225,3161,3162,3165,3167],{"class":227,"line":1780},[225,3163,3164],{"class":534},"      logout",[225,3166,752],{"class":644},[225,3168,518],{"class":231},[225,3170,3171],{"class":227,"line":1793},[225,3172,729],{"class":231},[225,3174,3175],{"class":227,"line":1806},[225,3176,2858],{"class":231},[225,3178,3179],{"class":227,"line":1811},[225,3180,243],{"emptyLinePlaceholder":242},[225,3182,3183,3185],{"class":227,"line":1816},[225,3184,863],{"class":487},[225,3186,609],{"class":231},[225,3188,3189,3191],{"class":227,"line":1825},[225,3190,2879],{"class":266},[225,3192,583],{"class":231},[225,3194,3195,3197],{"class":227,"line":1838},[225,3196,2892],{"class":266},[225,3198,583],{"class":231},[225,3200,3201,3203],{"class":227,"line":1859},[225,3202,2468],{"class":266},[225,3204,583],{"class":231},[225,3206,3207,3209],{"class":227,"line":1881},[225,3208,2484],{"class":266},[225,3210,583],{"class":231},[225,3212,3213,3216],{"class":227,"line":1894},[225,3214,3215],{"class":266},"    isAuthenticated",[225,3217,583],{"class":231},[225,3219,3220,3223],{"class":227,"line":1907},[225,3221,3222],{"class":266},"    login",[225,3224,583],{"class":231},[225,3226,3227,3230],{"class":227,"line":1912},[225,3228,3229],{"class":266},"    logout",[225,3231,583],{"class":231},[225,3233,3234,3237],{"class":227,"line":1917},[225,3235,3236],{"class":266},"    refreshToken",[225,3238,583],{"class":231},[225,3240,3241],{"class":227,"line":1926},[225,3242,789],{"class":231},[225,3244,3245,3247,3249],{"class":227,"line":1938},[225,3246,1166],{"class":231},[225,3248,562],{"class":266},[225,3250,518],{"class":231},[48,3252,3254],{"id":3253},"technique-2-test-generation-with-context","Technique 2: Test Generation with Context",[36,3256,3257],{},[60,3258,2131],{},[216,3260,3263],{"className":3261,"code":3262,"language":462},[460],"Generate Vitest unit tests for the SearchBar component:\n- Test v-model binding\n- Test debounced search emission\n- Test clear button functionality\n- Test accessibility attributes\n- Use Vue Testing Library\n",[211,3264,3262],{"__ignoreMap":221},[36,3266,3267],{},[60,3268,3269],{},"Generated Tests:",[216,3271,3273],{"className":472,"code":3272,"language":474,"meta":221,"style":221},"// components/__tests__/SearchBar.spec.ts\nimport { describe, it, expect, vi, beforeEach } from \"vitest\";\nimport { render, fireEvent, screen } from \"@testing-library/vue\";\nimport SearchBar from \"../SearchBar.vue\";\n\ndescribe(\"SearchBar\", () => {\n  beforeEach(() => {\n    vi.useFakeTimers();\n  });\n\n  it(\"renders with placeholder\", () => {\n    render(SearchBar, {\n      props: {\n        modelValue: \"\",\n        placeholder: \"Search products...\",\n      },\n    });\n\n    expect(\n      screen.getByPlaceholderText(\"Search products...\"),\n    ).toBeInTheDocument();\n  });\n\n  it(\"emits update:modelValue on input\", async () => {\n    const { emitted } = render(SearchBar, {\n      props: { modelValue: \"\" },\n    });\n\n    const input = screen.getByRole(\"searchbox\");\n    await fireEvent.update(input, \"test query\");\n\n    expect(emitted()[\"update:modelValue\"]).toBeTruthy();\n    expect(emitted()[\"update:modelValue\"][0]).toEqual([\"test query\"]);\n  });\n\n  it(\"emits debounced search event\", async () => {\n    const { emitted } = render(SearchBar, {\n      props: { modelValue: \"\" },\n    });\n\n    const input = screen.getByRole(\"searchbox\");\n    await fireEvent.update(input, \"test\");\n\n    expect(emitted().search).toBeFalsy();\n\n    vi.advanceTimersByTime(300);\n\n    expect(emitted().search).toBeTruthy();\n    expect(emitted().search[0]).toEqual([\"test\"]);\n  });\n\n  it(\"shows clear button when input has value\", () => {\n    const { rerender } = render(SearchBar, {\n      props: { modelValue: \"\" },\n    });\n\n    expect(screen.queryByLabelText(\"Clear search\")).not.toBeInTheDocument();\n\n    rerender({ modelValue: \"test\" });\n\n    expect(screen.getByLabelText(\"Clear search\")).toBeInTheDocument();\n  });\n\n  it(\"clears input when clear button is clicked\", async () => {\n    const { emitted } = render(SearchBar, {\n      props: { modelValue: \"test query\" },\n    });\n\n    const clearButton = screen.getByLabelText(\"Clear search\");\n    await fireEvent.click(clearButton);\n\n    expect(emitted()[\"update:modelValue\"][0]).toEqual([\"\"]);\n    expect(emitted().search[0]).toEqual([\"\"]);\n  });\n\n  it(\"has proper accessibility attributes\", () => {\n    render(SearchBar, {\n      props: { modelValue: \"test\" },\n    });\n\n    expect(screen.getByLabelText(\"Search input\")).toBeInTheDocument();\n    expect(screen.getByLabelText(\"Clear search\")).toBeInTheDocument();\n  });\n});\n",[211,3274,3275,3280,3322,3354,3373,3377,3399,3412,3426,3434,3438,3460,3473,3482,3493,3509,3514,3522,3526,3534,3556,3570,3578,3582,3606,3630,3647,3655,3659,3688,3717,3721,3751,3793,3801,3805,3828,3850,3866,3874,3878,3904,3931,3935,3960,3964,3982,3986,4010,4047,4055,4059,4080,4103,4119,4127,4131,4168,4172,4198,4202,4233,4241,4245,4268,4290,4310,4318,4322,4349,4369,4373,4408,4440,4448,4452,4473,4485,4505,4513,4517,4547,4577,4585],{"__ignoreMap":221},[225,3276,3277],{"class":227,"line":228},[225,3278,3279],{"class":481},"// components/__tests__/SearchBar.spec.ts\n",[225,3281,3282,3284,3286,3289,3291,3294,3296,3299,3301,3304,3306,3309,3311,3313,3315,3318,3320],{"class":227,"line":239},[225,3283,488],{"class":487},[225,3285,491],{"class":231},[225,3287,3288],{"class":266}," describe",[225,3290,497],{"class":231},[225,3292,3293],{"class":266}," it",[225,3295,497],{"class":231},[225,3297,3298],{"class":266}," expect",[225,3300,497],{"class":231},[225,3302,3303],{"class":266}," vi",[225,3305,497],{"class":231},[225,3307,3308],{"class":266}," beforeEach",[225,3310,503],{"class":231},[225,3312,506],{"class":487},[225,3314,509],{"class":231},[225,3316,3317],{"class":331},"vitest",[225,3319,515],{"class":231},[225,3321,518],{"class":231},[225,3323,3324,3326,3328,3331,3333,3336,3338,3341,3343,3345,3347,3350,3352],{"class":227,"line":246},[225,3325,488],{"class":487},[225,3327,491],{"class":231},[225,3329,3330],{"class":266}," render",[225,3332,497],{"class":231},[225,3334,3335],{"class":266}," fireEvent",[225,3337,497],{"class":231},[225,3339,3340],{"class":266}," screen",[225,3342,503],{"class":231},[225,3344,506],{"class":487},[225,3346,509],{"class":231},[225,3348,3349],{"class":331},"@testing-library/vue",[225,3351,515],{"class":231},[225,3353,518],{"class":231},[225,3355,3356,3358,3361,3364,3366,3369,3371],{"class":227,"line":255},[225,3357,488],{"class":487},[225,3359,3360],{"class":266}," SearchBar ",[225,3362,3363],{"class":487},"from",[225,3365,509],{"class":231},[225,3367,3368],{"class":331},"../SearchBar.vue",[225,3370,515],{"class":231},[225,3372,518],{"class":231},[225,3374,3375],{"class":227,"line":260},[225,3376,243],{"emptyLinePlaceholder":242},[225,3378,3379,3382,3384,3386,3389,3391,3393,3395,3397],{"class":227,"line":270},[225,3380,3381],{"class":534},"describe",[225,3383,645],{"class":266},[225,3385,515],{"class":231},[225,3387,3388],{"class":331},"SearchBar",[225,3390,515],{"class":231},[225,3392,497],{"class":231},[225,3394,1424],{"class":231},[225,3396,565],{"class":530},[225,3398,609],{"class":231},[225,3400,3401,3404,3406,3408,3410],{"class":227,"line":278},[225,3402,3403],{"class":534},"  beforeEach",[225,3405,645],{"class":644},[225,3407,752],{"class":231},[225,3409,565],{"class":530},[225,3411,609],{"class":231},[225,3413,3414,3417,3419,3422,3424],{"class":227,"line":286},[225,3415,3416],{"class":266},"    vi",[225,3418,629],{"class":231},[225,3420,3421],{"class":534},"useFakeTimers",[225,3423,752],{"class":644},[225,3425,518],{"class":231},[225,3427,3428,3430,3432],{"class":227,"line":294},[225,3429,848],{"class":231},[225,3431,562],{"class":644},[225,3433,518],{"class":231},[225,3435,3436],{"class":227,"line":302},[225,3437,243],{"emptyLinePlaceholder":242},[225,3439,3440,3443,3445,3447,3450,3452,3454,3456,3458],{"class":227,"line":307},[225,3441,3442],{"class":534},"  it",[225,3444,645],{"class":644},[225,3446,515],{"class":231},[225,3448,3449],{"class":331},"renders with placeholder",[225,3451,515],{"class":231},[225,3453,497],{"class":231},[225,3455,1424],{"class":231},[225,3457,565],{"class":530},[225,3459,609],{"class":231},[225,3461,3462,3465,3467,3469,3471],{"class":227,"line":315},[225,3463,3464],{"class":534},"    render",[225,3466,645],{"class":644},[225,3468,3388],{"class":266},[225,3470,497],{"class":231},[225,3472,609],{"class":231},[225,3474,3475,3478,3480],{"class":227,"line":320},[225,3476,3477],{"class":644},"      props",[225,3479,214],{"class":231},[225,3481,609],{"class":231},[225,3483,3484,3487,3489,3491],{"class":227,"line":340},[225,3485,3486],{"class":644},"        modelValue",[225,3488,214],{"class":231},[225,3490,1446],{"class":231},[225,3492,583],{"class":231},[225,3494,3495,3498,3500,3502,3505,3507],{"class":227,"line":348},[225,3496,3497],{"class":644},"        placeholder",[225,3499,214],{"class":231},[225,3501,509],{"class":231},[225,3503,3504],{"class":331},"Search products...",[225,3506,515],{"class":231},[225,3508,583],{"class":231},[225,3510,3511],{"class":227,"line":356},[225,3512,3513],{"class":231},"      },\n",[225,3515,3516,3518,3520],{"class":227,"line":364},[225,3517,2763],{"class":231},[225,3519,562],{"class":644},[225,3521,518],{"class":231},[225,3523,3524],{"class":227,"line":369},[225,3525,243],{"emptyLinePlaceholder":242},[225,3527,3528,3531],{"class":227,"line":377},[225,3529,3530],{"class":534},"    expect",[225,3532,3533],{"class":644},"(\n",[225,3535,3536,3539,3541,3544,3546,3548,3550,3552,3554],{"class":227,"line":382},[225,3537,3538],{"class":266},"      screen",[225,3540,629],{"class":231},[225,3542,3543],{"class":534},"getByPlaceholderText",[225,3545,645],{"class":644},[225,3547,515],{"class":231},[225,3549,3504],{"class":331},[225,3551,515],{"class":231},[225,3553,562],{"class":644},[225,3555,583],{"class":231},[225,3557,3558,3561,3563,3566,3568],{"class":227,"line":398},[225,3559,3560],{"class":644},"    )",[225,3562,629],{"class":231},[225,3564,3565],{"class":534},"toBeInTheDocument",[225,3567,752],{"class":644},[225,3569,518],{"class":231},[225,3571,3572,3574,3576],{"class":227,"line":413},[225,3573,848],{"class":231},[225,3575,562],{"class":644},[225,3577,518],{"class":231},[225,3579,3580],{"class":227,"line":428},[225,3581,243],{"emptyLinePlaceholder":242},[225,3583,3584,3586,3588,3590,3593,3595,3597,3600,3602,3604],{"class":227,"line":845},[225,3585,3442],{"class":534},[225,3587,645],{"class":644},[225,3589,515],{"class":231},[225,3591,3592],{"class":331},"emits update:modelValue on input",[225,3594,515],{"class":231},[225,3596,497],{"class":231},[225,3598,3599],{"class":530}," async",[225,3601,1424],{"class":231},[225,3603,565],{"class":530},[225,3605,609],{"class":231},[225,3607,3608,3611,3613,3616,3618,3620,3622,3624,3626,3628],{"class":227,"line":855},[225,3609,3610],{"class":530},"    const",[225,3612,491],{"class":231},[225,3614,3615],{"class":266}," emitted",[225,3617,503],{"class":231},[225,3619,596],{"class":231},[225,3621,3330],{"class":534},[225,3623,645],{"class":644},[225,3625,3388],{"class":266},[225,3627,497],{"class":231},[225,3629,609],{"class":231},[225,3631,3632,3634,3636,3638,3641,3643,3645],{"class":227,"line":860},[225,3633,3477],{"class":644},[225,3635,214],{"class":231},[225,3637,491],{"class":231},[225,3639,3640],{"class":644}," modelValue",[225,3642,214],{"class":231},[225,3644,1446],{"class":231},[225,3646,2577],{"class":231},[225,3648,3649,3651,3653],{"class":227,"line":870},[225,3650,2763],{"class":231},[225,3652,562],{"class":644},[225,3654,518],{"class":231},[225,3656,3657],{"class":227,"line":1310},[225,3658,243],{"emptyLinePlaceholder":242},[225,3660,3661,3663,3666,3668,3670,3672,3675,3677,3679,3682,3684,3686],{"class":227,"line":1336},[225,3662,3610],{"class":530},[225,3664,3665],{"class":266}," input",[225,3667,596],{"class":231},[225,3669,3340],{"class":266},[225,3671,629],{"class":231},[225,3673,3674],{"class":534},"getByRole",[225,3676,645],{"class":644},[225,3678,515],{"class":231},[225,3680,3681],{"class":331},"searchbox",[225,3683,515],{"class":231},[225,3685,562],{"class":644},[225,3687,518],{"class":231},[225,3689,3690,3693,3695,3697,3700,3702,3704,3706,3708,3711,3713,3715],{"class":227,"line":1368},[225,3691,3692],{"class":487},"    await",[225,3694,3335],{"class":266},[225,3696,629],{"class":231},[225,3698,3699],{"class":534},"update",[225,3701,645],{"class":644},[225,3703,2041],{"class":266},[225,3705,497],{"class":231},[225,3707,509],{"class":231},[225,3709,3710],{"class":331},"test query",[225,3712,515],{"class":231},[225,3714,562],{"class":644},[225,3716,518],{"class":231},[225,3718,3719],{"class":227,"line":1389},[225,3720,243],{"emptyLinePlaceholder":242},[225,3722,3723,3725,3727,3730,3733,3735,3737,3739,3742,3744,3747,3749],{"class":227,"line":1403},[225,3724,3530],{"class":534},[225,3726,645],{"class":644},[225,3728,3729],{"class":534},"emitted",[225,3731,3732],{"class":644},"()[",[225,3734,515],{"class":231},[225,3736,1059],{"class":331},[225,3738,515],{"class":231},[225,3740,3741],{"class":644},"])",[225,3743,629],{"class":231},[225,3745,3746],{"class":534},"toBeTruthy",[225,3748,752],{"class":644},[225,3750,518],{"class":231},[225,3752,3753,3755,3757,3759,3761,3763,3765,3767,3770,3773,3775,3777,3780,3783,3785,3787,3789,3791],{"class":227,"line":1409},[225,3754,3530],{"class":534},[225,3756,645],{"class":644},[225,3758,3729],{"class":534},[225,3760,3732],{"class":644},[225,3762,515],{"class":231},[225,3764,1059],{"class":331},[225,3766,515],{"class":231},[225,3768,3769],{"class":644},"][",[225,3771,3772],{"class":599},"0",[225,3774,3741],{"class":644},[225,3776,629],{"class":231},[225,3778,3779],{"class":534},"toEqual",[225,3781,3782],{"class":644},"([",[225,3784,515],{"class":231},[225,3786,3710],{"class":331},[225,3788,515],{"class":231},[225,3790,3741],{"class":644},[225,3792,518],{"class":231},[225,3794,3795,3797,3799],{"class":227,"line":1414},[225,3796,848],{"class":231},[225,3798,562],{"class":644},[225,3800,518],{"class":231},[225,3802,3803],{"class":227,"line":1431},[225,3804,243],{"emptyLinePlaceholder":242},[225,3806,3807,3809,3811,3813,3816,3818,3820,3822,3824,3826],{"class":227,"line":1453},[225,3808,3442],{"class":534},[225,3810,645],{"class":644},[225,3812,515],{"class":231},[225,3814,3815],{"class":331},"emits debounced search event",[225,3817,515],{"class":231},[225,3819,497],{"class":231},[225,3821,3599],{"class":530},[225,3823,1424],{"class":231},[225,3825,565],{"class":530},[225,3827,609],{"class":231},[225,3829,3830,3832,3834,3836,3838,3840,3842,3844,3846,3848],{"class":227,"line":1474},[225,3831,3610],{"class":530},[225,3833,491],{"class":231},[225,3835,3615],{"class":266},[225,3837,503],{"class":231},[225,3839,596],{"class":231},[225,3841,3330],{"class":534},[225,3843,645],{"class":644},[225,3845,3388],{"class":266},[225,3847,497],{"class":231},[225,3849,609],{"class":231},[225,3851,3852,3854,3856,3858,3860,3862,3864],{"class":227,"line":1479},[225,3853,3477],{"class":644},[225,3855,214],{"class":231},[225,3857,491],{"class":231},[225,3859,3640],{"class":644},[225,3861,214],{"class":231},[225,3863,1446],{"class":231},[225,3865,2577],{"class":231},[225,3867,3868,3870,3872],{"class":227,"line":1489},[225,3869,2763],{"class":231},[225,3871,562],{"class":644},[225,3873,518],{"class":231},[225,3875,3876],{"class":227,"line":1494},[225,3877,243],{"emptyLinePlaceholder":242},[225,3879,3880,3882,3884,3886,3888,3890,3892,3894,3896,3898,3900,3902],{"class":227,"line":1504},[225,3881,3610],{"class":530},[225,3883,3665],{"class":266},[225,3885,596],{"class":231},[225,3887,3340],{"class":266},[225,3889,629],{"class":231},[225,3891,3674],{"class":534},[225,3893,645],{"class":644},[225,3895,515],{"class":231},[225,3897,3681],{"class":331},[225,3899,515],{"class":231},[225,3901,562],{"class":644},[225,3903,518],{"class":231},[225,3905,3906,3908,3910,3912,3914,3916,3918,3920,3922,3925,3927,3929],{"class":227,"line":1527},[225,3907,3692],{"class":487},[225,3909,3335],{"class":266},[225,3911,629],{"class":231},[225,3913,3699],{"class":534},[225,3915,645],{"class":644},[225,3917,2041],{"class":266},[225,3919,497],{"class":231},[225,3921,509],{"class":231},[225,3923,3924],{"class":331},"test",[225,3926,515],{"class":231},[225,3928,562],{"class":644},[225,3930,518],{"class":231},[225,3932,3933],{"class":227,"line":1536},[225,3934,243],{"emptyLinePlaceholder":242},[225,3936,3937,3939,3941,3943,3945,3947,3949,3951,3953,3956,3958],{"class":227,"line":1551},[225,3938,3530],{"class":534},[225,3940,645],{"class":644},[225,3942,3729],{"class":534},[225,3944,752],{"class":644},[225,3946,629],{"class":231},[225,3948,1091],{"class":266},[225,3950,562],{"class":644},[225,3952,629],{"class":231},[225,3954,3955],{"class":534},"toBeFalsy",[225,3957,752],{"class":644},[225,3959,518],{"class":231},[225,3961,3962],{"class":227,"line":1565},[225,3963,243],{"emptyLinePlaceholder":242},[225,3965,3966,3968,3970,3973,3975,3978,3980],{"class":227,"line":1580},[225,3967,3416],{"class":266},[225,3969,629],{"class":231},[225,3971,3972],{"class":534},"advanceTimersByTime",[225,3974,645],{"class":644},[225,3976,3977],{"class":599},"300",[225,3979,562],{"class":644},[225,3981,518],{"class":231},[225,3983,3984],{"class":227,"line":1595},[225,3985,243],{"emptyLinePlaceholder":242},[225,3987,3988,3990,3992,3994,3996,3998,4000,4002,4004,4006,4008],{"class":227,"line":1610},[225,3989,3530],{"class":534},[225,3991,645],{"class":644},[225,3993,3729],{"class":534},[225,3995,752],{"class":644},[225,3997,629],{"class":231},[225,3999,1091],{"class":266},[225,4001,562],{"class":644},[225,4003,629],{"class":231},[225,4005,3746],{"class":534},[225,4007,752],{"class":644},[225,4009,518],{"class":231},[225,4011,4012,4014,4016,4018,4020,4022,4024,4027,4029,4031,4033,4035,4037,4039,4041,4043,4045],{"class":227,"line":1625},[225,4013,3530],{"class":534},[225,4015,645],{"class":644},[225,4017,3729],{"class":534},[225,4019,752],{"class":644},[225,4021,629],{"class":231},[225,4023,1091],{"class":266},[225,4025,4026],{"class":644},"[",[225,4028,3772],{"class":599},[225,4030,3741],{"class":644},[225,4032,629],{"class":231},[225,4034,3779],{"class":534},[225,4036,3782],{"class":644},[225,4038,515],{"class":231},[225,4040,3924],{"class":331},[225,4042,515],{"class":231},[225,4044,3741],{"class":644},[225,4046,518],{"class":231},[225,4048,4049,4051,4053],{"class":227,"line":1631},[225,4050,848],{"class":231},[225,4052,562],{"class":644},[225,4054,518],{"class":231},[225,4056,4057],{"class":227,"line":1639},[225,4058,243],{"emptyLinePlaceholder":242},[225,4060,4061,4063,4065,4067,4070,4072,4074,4076,4078],{"class":227,"line":1654},[225,4062,3442],{"class":534},[225,4064,645],{"class":644},[225,4066,515],{"class":231},[225,4068,4069],{"class":331},"shows clear button when input has value",[225,4071,515],{"class":231},[225,4073,497],{"class":231},[225,4075,1424],{"class":231},[225,4077,565],{"class":530},[225,4079,609],{"class":231},[225,4081,4082,4084,4086,4089,4091,4093,4095,4097,4099,4101],{"class":227,"line":1669},[225,4083,3610],{"class":530},[225,4085,491],{"class":231},[225,4087,4088],{"class":266}," rerender",[225,4090,503],{"class":231},[225,4092,596],{"class":231},[225,4094,3330],{"class":534},[225,4096,645],{"class":644},[225,4098,3388],{"class":266},[225,4100,497],{"class":231},[225,4102,609],{"class":231},[225,4104,4105,4107,4109,4111,4113,4115,4117],{"class":227,"line":1683},[225,4106,3477],{"class":644},[225,4108,214],{"class":231},[225,4110,491],{"class":231},[225,4112,3640],{"class":644},[225,4114,214],{"class":231},[225,4116,1446],{"class":231},[225,4118,2577],{"class":231},[225,4120,4121,4123,4125],{"class":227,"line":1697},[225,4122,2763],{"class":231},[225,4124,562],{"class":644},[225,4126,518],{"class":231},[225,4128,4129],{"class":227,"line":1703},[225,4130,243],{"emptyLinePlaceholder":242},[225,4132,4133,4135,4137,4140,4142,4145,4147,4149,4151,4153,4155,4157,4160,4162,4164,4166],{"class":227,"line":1709},[225,4134,3530],{"class":534},[225,4136,645],{"class":644},[225,4138,4139],{"class":266},"screen",[225,4141,629],{"class":231},[225,4143,4144],{"class":534},"queryByLabelText",[225,4146,645],{"class":644},[225,4148,515],{"class":231},[225,4150,1678],{"class":331},[225,4152,515],{"class":231},[225,4154,2337],{"class":644},[225,4156,629],{"class":231},[225,4158,4159],{"class":266},"not",[225,4161,629],{"class":231},[225,4163,3565],{"class":534},[225,4165,752],{"class":644},[225,4167,518],{"class":231},[225,4169,4170],{"class":227,"line":1720},[225,4171,243],{"emptyLinePlaceholder":242},[225,4173,4174,4177,4179,4182,4184,4186,4188,4190,4192,4194,4196],{"class":227,"line":1730},[225,4175,4176],{"class":534},"    rerender",[225,4178,645],{"class":644},[225,4180,4181],{"class":231},"{",[225,4183,3640],{"class":644},[225,4185,214],{"class":231},[225,4187,509],{"class":231},[225,4189,3924],{"class":331},[225,4191,515],{"class":231},[225,4193,503],{"class":231},[225,4195,562],{"class":644},[225,4197,518],{"class":231},[225,4199,4200],{"class":227,"line":1739},[225,4201,243],{"emptyLinePlaceholder":242},[225,4203,4204,4206,4208,4210,4212,4215,4217,4219,4221,4223,4225,4227,4229,4231],{"class":227,"line":1744},[225,4205,3530],{"class":534},[225,4207,645],{"class":644},[225,4209,4139],{"class":266},[225,4211,629],{"class":231},[225,4213,4214],{"class":534},"getByLabelText",[225,4216,645],{"class":644},[225,4218,515],{"class":231},[225,4220,1678],{"class":331},[225,4222,515],{"class":231},[225,4224,2337],{"class":644},[225,4226,629],{"class":231},[225,4228,3565],{"class":534},[225,4230,752],{"class":644},[225,4232,518],{"class":231},[225,4234,4235,4237,4239],{"class":227,"line":1757},[225,4236,848],{"class":231},[225,4238,562],{"class":644},[225,4240,518],{"class":231},[225,4242,4243],{"class":227,"line":1766},[225,4244,243],{"emptyLinePlaceholder":242},[225,4246,4247,4249,4251,4253,4256,4258,4260,4262,4264,4266],{"class":227,"line":1780},[225,4248,3442],{"class":534},[225,4250,645],{"class":644},[225,4252,515],{"class":231},[225,4254,4255],{"class":331},"clears input when clear button is clicked",[225,4257,515],{"class":231},[225,4259,497],{"class":231},[225,4261,3599],{"class":530},[225,4263,1424],{"class":231},[225,4265,565],{"class":530},[225,4267,609],{"class":231},[225,4269,4270,4272,4274,4276,4278,4280,4282,4284,4286,4288],{"class":227,"line":1793},[225,4271,3610],{"class":530},[225,4273,491],{"class":231},[225,4275,3615],{"class":266},[225,4277,503],{"class":231},[225,4279,596],{"class":231},[225,4281,3330],{"class":534},[225,4283,645],{"class":644},[225,4285,3388],{"class":266},[225,4287,497],{"class":231},[225,4289,609],{"class":231},[225,4291,4292,4294,4296,4298,4300,4302,4304,4306,4308],{"class":227,"line":1806},[225,4293,3477],{"class":644},[225,4295,214],{"class":231},[225,4297,491],{"class":231},[225,4299,3640],{"class":644},[225,4301,214],{"class":231},[225,4303,509],{"class":231},[225,4305,3710],{"class":331},[225,4307,515],{"class":231},[225,4309,2577],{"class":231},[225,4311,4312,4314,4316],{"class":227,"line":1811},[225,4313,2763],{"class":231},[225,4315,562],{"class":644},[225,4317,518],{"class":231},[225,4319,4320],{"class":227,"line":1816},[225,4321,243],{"emptyLinePlaceholder":242},[225,4323,4324,4326,4329,4331,4333,4335,4337,4339,4341,4343,4345,4347],{"class":227,"line":1825},[225,4325,3610],{"class":530},[225,4327,4328],{"class":266}," clearButton",[225,4330,596],{"class":231},[225,4332,3340],{"class":266},[225,4334,629],{"class":231},[225,4336,4214],{"class":534},[225,4338,645],{"class":644},[225,4340,515],{"class":231},[225,4342,1678],{"class":331},[225,4344,515],{"class":231},[225,4346,562],{"class":644},[225,4348,518],{"class":231},[225,4350,4351,4353,4355,4357,4360,4362,4365,4367],{"class":227,"line":1838},[225,4352,3692],{"class":487},[225,4354,3335],{"class":266},[225,4356,629],{"class":231},[225,4358,4359],{"class":534},"click",[225,4361,645],{"class":644},[225,4363,4364],{"class":266},"clearButton",[225,4366,562],{"class":644},[225,4368,518],{"class":231},[225,4370,4371],{"class":227,"line":1859},[225,4372,243],{"emptyLinePlaceholder":242},[225,4374,4375,4377,4379,4381,4383,4385,4387,4389,4391,4393,4395,4397,4399,4401,4404,4406],{"class":227,"line":1881},[225,4376,3530],{"class":534},[225,4378,645],{"class":644},[225,4380,3729],{"class":534},[225,4382,3732],{"class":644},[225,4384,515],{"class":231},[225,4386,1059],{"class":331},[225,4388,515],{"class":231},[225,4390,3769],{"class":644},[225,4392,3772],{"class":599},[225,4394,3741],{"class":644},[225,4396,629],{"class":231},[225,4398,3779],{"class":534},[225,4400,3782],{"class":644},[225,4402,4403],{"class":231},"\"\"",[225,4405,3741],{"class":644},[225,4407,518],{"class":231},[225,4409,4410,4412,4414,4416,4418,4420,4422,4424,4426,4428,4430,4432,4434,4436,4438],{"class":227,"line":1894},[225,4411,3530],{"class":534},[225,4413,645],{"class":644},[225,4415,3729],{"class":534},[225,4417,752],{"class":644},[225,4419,629],{"class":231},[225,4421,1091],{"class":266},[225,4423,4026],{"class":644},[225,4425,3772],{"class":599},[225,4427,3741],{"class":644},[225,4429,629],{"class":231},[225,4431,3779],{"class":534},[225,4433,3782],{"class":644},[225,4435,4403],{"class":231},[225,4437,3741],{"class":644},[225,4439,518],{"class":231},[225,4441,4442,4444,4446],{"class":227,"line":1907},[225,4443,848],{"class":231},[225,4445,562],{"class":644},[225,4447,518],{"class":231},[225,4449,4450],{"class":227,"line":1912},[225,4451,243],{"emptyLinePlaceholder":242},[225,4453,4454,4456,4458,4460,4463,4465,4467,4469,4471],{"class":227,"line":1917},[225,4455,3442],{"class":534},[225,4457,645],{"class":644},[225,4459,515],{"class":231},[225,4461,4462],{"class":331},"has proper accessibility attributes",[225,4464,515],{"class":231},[225,4466,497],{"class":231},[225,4468,1424],{"class":231},[225,4470,565],{"class":530},[225,4472,609],{"class":231},[225,4474,4475,4477,4479,4481,4483],{"class":227,"line":1926},[225,4476,3464],{"class":534},[225,4478,645],{"class":644},[225,4480,3388],{"class":266},[225,4482,497],{"class":231},[225,4484,609],{"class":231},[225,4486,4487,4489,4491,4493,4495,4497,4499,4501,4503],{"class":227,"line":1938},[225,4488,3477],{"class":644},[225,4490,214],{"class":231},[225,4492,491],{"class":231},[225,4494,3640],{"class":644},[225,4496,214],{"class":231},[225,4498,509],{"class":231},[225,4500,3924],{"class":331},[225,4502,515],{"class":231},[225,4504,2577],{"class":231},[225,4506,4507,4509,4511],{"class":227,"line":1950},[225,4508,2763],{"class":231},[225,4510,562],{"class":644},[225,4512,518],{"class":231},[225,4514,4515],{"class":227,"line":1963},[225,4516,243],{"emptyLinePlaceholder":242},[225,4518,4519,4521,4523,4525,4527,4529,4531,4533,4535,4537,4539,4541,4543,4545],{"class":227,"line":1974},[225,4520,3530],{"class":534},[225,4522,645],{"class":644},[225,4524,4139],{"class":266},[225,4526,629],{"class":231},[225,4528,4214],{"class":534},[225,4530,645],{"class":644},[225,4532,515],{"class":231},[225,4534,1605],{"class":331},[225,4536,515],{"class":231},[225,4538,2337],{"class":644},[225,4540,629],{"class":231},[225,4542,3565],{"class":534},[225,4544,752],{"class":644},[225,4546,518],{"class":231},[225,4548,4549,4551,4553,4555,4557,4559,4561,4563,4565,4567,4569,4571,4573,4575],{"class":227,"line":1986},[225,4550,3530],{"class":534},[225,4552,645],{"class":644},[225,4554,4139],{"class":266},[225,4556,629],{"class":231},[225,4558,4214],{"class":534},[225,4560,645],{"class":644},[225,4562,515],{"class":231},[225,4564,1678],{"class":331},[225,4566,515],{"class":231},[225,4568,2337],{"class":644},[225,4570,629],{"class":231},[225,4572,3565],{"class":534},[225,4574,752],{"class":644},[225,4576,518],{"class":231},[225,4578,4579,4581,4583],{"class":227,"line":1999},[225,4580,848],{"class":231},[225,4582,562],{"class":644},[225,4584,518],{"class":231},[225,4586,4587,4589,4591],{"class":227,"line":2015},[225,4588,1166],{"class":231},[225,4590,562],{"class":266},[225,4592,518],{"class":231},[40,4594,4596],{"id":4595},"phase-5-best-practices-and-pitfalls-to-avoid","Phase 5: Best Practices and Pitfalls to Avoid",[48,4598,4600],{"id":4599},"dos","✅ DO's",[2093,4602,4603,4619,4635,4651],{},[56,4604,4605,4608],{},[60,4606,4607],{},"Always Review AI-Generated Code",[53,4609,4610,4613,4616],{},[56,4611,4612],{},"Check for security vulnerabilities",[56,4614,4615],{},"Verify type safety",[56,4617,4618],{},"Ensure it follows your project conventions",[56,4620,4621,4624],{},[60,4622,4623],{},"Use AI for Repetitive Tasks",[53,4625,4626,4629,4632],{},[56,4627,4628],{},"Generating CRUD operations",[56,4630,4631],{},"Creating form validation schemas",[56,4633,4634],{},"Writing boilerplate tests",[56,4636,4637,4640],{},[60,4638,4639],{},"Provide Clear Context",[53,4641,4642,4645,4648],{},[56,4643,4644],{},"Include relevant file paths in prompts",[56,4646,4647],{},"Specify TypeScript requirements",[56,4649,4650],{},"Mention testing framework preferences",[56,4652,4653,4656],{},[60,4654,4655],{},"Iterate and Refine",[53,4657,4658,4661,4664],{},[56,4659,4660],{},"Start with a basic prompt",[56,4662,4663],{},"Review the output",[56,4665,4666],{},"Refine and regenerate if needed",[48,4668,4670],{"id":4669},"donts","❌ DON'Ts",[2093,4672,4673,4689,4705,4721],{},[56,4674,4675,4678],{},[60,4676,4677],{},"Don't Blindly Copy-Paste",[53,4679,4680,4683,4686],{},[56,4681,4682],{},"AI can make mistakes",[56,4684,4685],{},"Generated code might not fit your architecture",[56,4687,4688],{},"Security issues might be present",[56,4690,4691,4694],{},[60,4692,4693],{},"Don't Skip Testing",[53,4695,4696,4699,4702],{},[56,4697,4698],{},"AI-generated code still needs tests",[56,4700,4701],{},"Verify edge cases manually",[56,4703,4704],{},"Run your test suite after AI changes",[56,4706,4707,4710],{},[60,4708,4709],{},"Don't Use AI for Critical Security Logic",[53,4711,4712,4715,4718],{},[56,4713,4714],{},"Authentication flows need careful review",[56,4716,4717],{},"Authorization logic should be human-verified",[56,4719,4720],{},"Encryption/decryption requires expertise",[56,4722,4723,4726],{},[60,4724,4725],{},"Don't Over-Engineer",[53,4727,4728,4731,4734],{},[56,4729,4730],{},"AI might suggest overly complex solutions",[56,4732,4733],{},"Keep it simple unless complexity is warranted",[56,4735,4736],{},"Prefer readable code over \"clever\" code",[40,4738,4740],{"id":4739},"phase-6-real-world-example-building-a-feature-with-ai","Phase 6: Real-World Example - Building a Feature with AI",[36,4742,4743],{},"Let's build a complete feature: a \"Product Filter\" component with AI assistance.",[48,4745,4747],{"id":4746},"step-1-define-requirements","Step 1: Define Requirements",[216,4749,4752],{"className":4750,"code":4751,"language":462},[460],"Create a product filtering system for an e-commerce site:\n- Multi-select category filter\n- Price range slider\n- Search by name\n- Sort options (price, name, date)\n- Show active filter count\n- Clear all filters button\n- Persist filters in URL query params\n",[211,4753,4751],{"__ignoreMap":221},[48,4755,4757],{"id":4756},"step-2-generate-component-structure","Step 2: Generate Component Structure",[36,4759,4760],{},[60,4761,4762],{},"Prompt to AI:",[216,4764,4767],{"className":4765,"code":4766,"language":462},[460],"Generate a Vue 3 component structure for product filtering with:\n1. FilterPanel.vue - Main filter component\n2. useProductFilters composable - Filter logic\n3. TypeScript types for filters\n4. URL sync with Vue Router\n",[211,4768,4766],{"__ignoreMap":221},[48,4770,4772],{"id":4771},"step-3-review-and-integrate","Step 3: Review and Integrate",[36,4774,4775],{},"AI generates the components, and you:",[2093,4777,4778,4781,4784,4787,4790],{},[56,4779,4780],{},"Review code for security issues",[56,4782,4783],{},"Adjust styling to match design system",[56,4785,4786],{},"Add missing edge cases",[56,4788,4789],{},"Write additional tests",[56,4791,4792],{},"Optimize performance if needed",[48,4794,4796],{"id":4795},"step-4-refine-with-ai","Step 4: Refine with AI",[216,4798,4801],{"className":4799,"code":4800,"language":462},[460],"The FilterPanel component is too large. Extract:\n- PriceRangeSlider as separate component\n- CategoryCheckboxes as separate component\n- Maintain type safety and emit proper events\n",[211,4802,4800],{"__ignoreMap":221},[40,4804,4806],{"id":4805},"conclusion","Conclusion",[36,4808,4809],{},"AI is a powerful tool for Vue.js development, but it's most effective when used strategically. Use it to handle boilerplate, accelerate development, and explore patterns—but always apply human judgment to architecture, security, and user experience decisions.",[36,4811,4812],{},"The key is finding the right balance: let AI handle the tedious work while you focus on the creative and critical aspects of building great applications.",[48,4814,4816],{"id":4815},"key-takeaways","Key Takeaways",[53,4818,4819,4822,4825,4828,4831,4834],{},[56,4820,4821],{},"🎯 Use AI for boilerplate, testing, and refactoring",[56,4823,4824],{},"🔍 Always review and test AI-generated code",[56,4826,4827],{},"📝 Provide clear context in your prompts",[56,4829,4830],{},"🛡️ Human oversight is essential for security and architecture",[56,4832,4833],{},"🔄 Iterate and refine AI outputs",[56,4835,4836],{},"🧪 Never skip testing AI-generated code",[36,4838,4839],{},[60,4840,4841],{},"What's Next?",[36,4843,4844],{},"Experiment with different AI tools, find what works for your workflow, and remember: AI is your assistant, not your replacement. The best results come from human creativity combined with AI efficiency.",[1749,4846,4847],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":221,"searchDepth":239,"depth":239,"links":4849},[4850,4854,4858,4863,4867,4871,4877],{"id":42,"depth":239,"text":43,"children":4851},[4852,4853],{"id":50,"depth":246,"text":51},{"id":96,"depth":246,"text":97},{"id":133,"depth":239,"text":134,"children":4855},[4856,4857],{"id":137,"depth":246,"text":138},{"id":201,"depth":246,"text":202},{"id":446,"depth":239,"text":447,"children":4859},[4860,4861,4862],{"id":450,"depth":246,"text":451},{"id":895,"depth":246,"text":896},{"id":2071,"depth":246,"text":2072},{"id":2121,"depth":239,"text":2122,"children":4864},[4865,4866],{"id":2125,"depth":246,"text":2126},{"id":3253,"depth":246,"text":3254},{"id":4595,"depth":239,"text":4596,"children":4868},[4869,4870],{"id":4599,"depth":246,"text":4600},{"id":4669,"depth":246,"text":4670},{"id":4739,"depth":239,"text":4740,"children":4872},[4873,4874,4875,4876],{"id":4746,"depth":246,"text":4747},{"id":4756,"depth":246,"text":4757},{"id":4771,"depth":246,"text":4772},{"id":4795,"depth":246,"text":4796},{"id":4805,"depth":239,"text":4806,"children":4878},[4879],{"id":4815,"depth":246,"text":4816},"2025-12-21T00:00:00.000Z","Learn how to leverage AI assistants and agents effectively in Vue.js development to write better code, accelerate development, and maintain best practices without losing control of your codebase.","md","https://images.unsplash.com/photo-1677442136019-21780ecad995?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",{},{"title":14,"description":4881},"R1QT67m8AwiPf7qSjydq-L-mjXmn6n98m7sG6X1JUDg",[4888,4890],{"title":10,"path":11,"stem":12,"description":4889,"children":-1},"A step-by-step guide to implementing real-time updates in Nuxt 3 using Server-Sent Events (SSE) as a lightweight alternative to WebSockets.",{"title":18,"path":19,"stem":20,"description":4891,"children":-1},"A step-by-step guide to creating Higher-Order Components (HOC) in React to handle cross-cutting concerns like authentication, error handling, and more.",1771263412298]