[{"data":1,"prerenderedAt":540},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Fmigrate-vue-2-with-vuetify-and-jest-to-vite-and-vitest":204,"\u002Fblog\u002Fmigrate-vue-2-with-vuetify-and-jest-to-vite-and-vitest-surround":535},[4,8,12,16,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200],{"title":5,"path":6,"stem":7},"You do not have time to not have tests","\u002Fblog\u002Fyou-do-not-have-time-to-not-have-tests","2.blog\u002F20211217.you-do-not-have-time-to-not-have-tests",{"title":9,"path":10,"stem":11},"Migrate Vue 2 with Vuetify and Jest to Vite and Vitest","\u002Fblog\u002Fmigrate-vue-2-with-vuetify-and-jest-to-vite-and-vitest","2.blog\u002F20220109.migrate-vue-2-with-vuetify-and-jest-to-vite-and-vitest",{"title":13,"path":14,"stem":15},"I am a Dark Matter Developer","\u002Fblog\u002Fi-am-a-dark-matter-developer","2.blog\u002F20220626.i-am-a-dark-matter-developer",{"title":17,"path":18,"stem":19},"Why using Conventional commits is useful","\u002Fblog\u002Fusing-conventional-commits","2.blog\u002F20240623.using-conventional-commits",{"title":21,"path":22,"stem":23},"Why you should make a toolbox repository","\u002Fblog\u002Fwhy-you-should-make-a-toolbox-repository","2.blog\u002F20240630.Why-you-should-make-a-toolbox-repository",{"title":25,"path":26,"stem":27},"Apache Airflow Part 1 - Why and Goals for a near Serverless ELT","\u002Fblog\u002Fapache-airflow-part-1-why-and-goals","2.blog\u002F20240710.apache-airflow-part-1-why-and-goals",{"title":29,"path":30,"stem":31},"Oh My Zsh on your server","\u002Fblog\u002Foh-my-zsh-on-your-server","2.blog\u002F20240711.oh-my-zsh-on-your-server",{"title":33,"path":34,"stem":35},"Fire tablet and YouTube Kids","\u002Fblog\u002Ffire-tablet-and-youtube-kids","2.blog\u002F20240714.fire-tablet-and-youtube-kids",{"title":37,"path":38,"stem":39},"Using Ollama and Continue as a GitHub Copilot Alternative","\u002Fblog\u002Fusing-ollama-and-continue-as-github-copilot-alternative","2.blog\u002F20240723.using-ollama-and-continue-as-github-copilot-alternative",{"title":41,"path":42,"stem":43},"Debugging Local Packages Made Easy with pnpm","\u002Fblog\u002Fdebugging-local-packages-with-pnpm-link","2.blog\u002F20250422.debugging local-packages-with-pnpm-link",{"title":45,"path":46,"stem":47},"Two Weeks with Cloudflare AI and Tools","\u002Fblog\u002Ftwo-weeks-with-cloudflare-ai-and-tools","2.blog\u002F20250509.two-weeks-with-cloudflare-aI-and-tools",{"title":49,"path":50,"stem":51},"Adding Prompts to VS Code - How I Learned to Stop Worrying and Love AI Context","\u002Fblog\u002Fadding-prompts-to-vscode","2.blog\u002F20250528.adding-prompts-to-vscode",{"title":53,"path":54,"stem":55},"My Best Practices","\u002Fblog\u002Fmy-best-practicies","2.blog\u002F20250607.my-best-practicies",{"title":57,"path":58,"stem":59},"Creating my own CLI Tool - Towles Tool","\u002Fblog\u002Ftowles-tool","2.blog\u002F20250607.towles-tool",{"title":61,"path":62,"stem":63},"Software Development Best Practices & ITIL","\u002Fblog\u002Fsoftware-engineering-and-itil-best-practices","2.blog\u002F20250612.software-engineering-and-itil-best-practices",{"title":65,"path":66,"stem":67},"Voice to Text","\u002Fblog\u002Fvoice-to-text","2.blog\u002F20250622.voice-to-text",{"title":69,"path":70,"stem":71},"Setting Up ComfyUI - A Better Alternative to Fooocus","\u002Fblog\u002Fcomfy-ui-setup","2.blog\u002F20250628.comfy-ui-setup",{"title":73,"path":74,"stem":75},"Voice to System","\u002Fblog\u002Fvoice-to-system","2.blog\u002F20250705.voice-to-system",{"title":77,"path":78,"stem":79},"Tips for Claude Code","\u002Fblog\u002Ftips-for-claude-code","2.blog\u002F20250713.tips-for-claude-code",{"title":81,"path":82,"stem":83},"Review That AI Code: Why I Read Every Line Generated Code","\u002Fblog\u002Freview-that-ai-code","2.blog\u002F20250720.review-that-ai-code",{"title":85,"path":86,"stem":87},"My Context Engineering Journey: From Dev Scripts to AI Collaboration","\u002Fblog\u002F20250803-1.my-context-engineering-journey","2.blog\u002F20250803-1.my-context-engineering-journey",{"title":89,"path":90,"stem":91},"Context Engineering at Scale: Enterprise Lessons and the Future of Development","\u002Fblog\u002F20250803-2.context-engineering-at-scale","2.blog\u002F20250803-2.context-engineering-at-scale",{"title":93,"path":94,"stem":95},"Check That Your Tools and Linters Do Not Burn Tokens","\u002Fblog\u002Fcheck-that-your-tools-and-linters-do-not-burn-tokens","2.blog\u002F20250806.check-that-your-tools-and-linters-do-not-burn-tokens",{"title":97,"path":98,"stem":99},"Markdown + AI: The Communication Protocol That Changes Everything","\u002Fblog\u002Fmarkdown-plus-ai-the-communication-protocol-that-changes-everything","2.blog\u002F20250814.markdown-plus-ai-the-communication-protocol-that-changes-everything",{"title":101,"path":102,"stem":103},"Finally: Type-Safe AI in Production (And Why I'm Here For It)","\u002Fblog\u002Ffinally-type-safe-ai-in-production-and-why-im-here-for-it","2.blog\u002F20250819.finally-type-safe-ai-in-production-and-why-im-here-for-it",{"title":105,"path":106,"stem":107},"Dotfiles: Masterpiece or Late Stage Picasso?","\u002Fblog\u002Fdotfiles-masterpiece-or-late-stage-picasso","2.blog\u002F20250822.dotfiles-masterpiece-or-late-stage-picasso",{"title":109,"path":110,"stem":111},"Beyond API Wrappers: Building State-Driven MCP Servers for Long-Horizon Agent Orchestration","\u002Fblog\u002Fbeyond-api-wrappers-mcp-servers","2.blog\u002F20250907.beyond-api-wrappers-mcp-servers",{"title":113,"path":114,"stem":115},"Why Vertical Integration Wins: A Software Engineer's Case for Owning Your Stack","\u002Fblog\u002Fwhy-i-bought-tesla-model-3-vertical-integration","2.blog\u002F20250928.why-i-bought-tesla-model-3-vertical-integration",{"title":117,"path":118,"stem":119},"The Min-Maxer's Trifecta: Building Tools for the Game You Actually Play","\u002Fblog\u002Fmin-maxer-trifecta","2.blog\u002F20251004.min-maxer-trifecta",{"title":121,"path":122,"stem":123},"Read The Source: Learning by Cutting Out The Middleman and RTFM","\u002Fblog\u002Fread-the-source","2.blog\u002F20251010.read-the-source",{"title":125,"path":126,"stem":127},"The Exponential Shift: Why AI Progress Feels Different Now","\u002Fblog\u002Fthe-exponential-shift","2.blog\u002F20251015.the-exponential-shift",{"title":129,"path":130,"stem":131},"Plan Mode for Your Problems, Edit Mode for Claude's","\u002Fblog\u002Fplan-mode-problems-edit-mode-solutions","2.blog\u002F20251019.plan-mode-problems-edit-mode-solutions",{"title":133,"path":134,"stem":135},"AWS Aurora DSQL Looked Perfect Until I Needed the Connection String","\u002Fblog\u002Faws-aurora-dsql-postgres-serverless-authentication","2.blog\u002F20251028.aws-aurora-dsql-postgres-serverless-authentication",{"title":137,"path":138,"stem":139},"Switchback: Browser History for Your Thoughts","\u002Fblog\u002Fswitchback-second-order-reasoning","2.blog\u002F20251205.switchback-second-order-reasoning",{"title":141,"path":142,"stem":143},"AI Pairing: Notes to Self","\u002Fblog\u002Fai-pairing-notes-to-self","2.blog\u002F20251216.ai-pairing-notes-to-self",{"title":145,"path":146,"stem":147},"I've Been Sleeping on Zellij","\u002Fblog\u002Fsleeping-on-zellij","2.blog\u002F20251229.sleeping-on-zellij",{"title":149,"path":150,"stem":151},"Implementing a Ralph Wiggum Loop: The Secret is Session Markers","\u002Fblog\u002Fimplementing-ralph-wiggum-loop-for-autonomous-ai-coding","2.blog\u002F20260114.implementing-ralph-wiggum-loop-for-autonomous-ai-coding",{"title":153,"path":154,"stem":155},"Goodhart's Law Ate My Context Window","\u002Fblog\u002Fgoodharts-law-ate-my-context-window","2.blog\u002F20260119.goodharts-law-ate-my-context-window",{"title":157,"path":158,"stem":159},"Claude Code's Hidden Multi-Agent System Is Real","\u002Fblog\u002Fclaude-code-hidden-multi-agent-system","2.blog\u002F20260124.claude-code-hidden-multi-agent-system",{"title":161,"path":162,"stem":163},"Free Printable Math Sheets for Kids — Number Chart, Skip Counting, Multiplication, and More","\u002Fblog\u002Ffree-printable-number-chart-and-coin-sheets","2.blog\u002F20260214.free-printable-number-chart-and-coin-sheets",{"title":165,"path":166,"stem":167},"We Are Near the End of the Exponential","\u002Fblog\u002Fnear-the-end-of-the-exponential","2.blog\u002F20260214.near-the-end-of-the-exponential",{"title":169,"path":170,"stem":171},"Free Printable Language Arts Sheets for Kids — Sight Words, Parts of Speech, Homophones, and More","\u002Fblog\u002Ffree-printable-sight-words-and-grammar-sheets","2.blog\u002F20260215.free-printable-sight-words-and-grammar-sheets",{"title":173,"path":174,"stem":175},"Interactive Code Execution with Artifacts","\u002Fblog\u002Finteractive-code-execution-with-artifacts","2.blog\u002F20260215.interactive-code-execution-with-artifacts",{"title":177,"path":178,"stem":179},"Free Printable Telling Time Worksheet for Kids — Clock Reference & Practice Sheet","\u002Fblog\u002Ffree-printable-telling-time-worksheet","2.blog\u002F20260216.free-printable-telling-time-worksheet",{"title":181,"path":182,"stem":183},"Claude Code Skills: Teaching AI Your Playbook","\u002Fblog\u002Fclaude-code-skills-guide","2.blog\u002F20260221.claude-code-skills-guide",{"title":185,"path":186,"stem":187},"Building a Multi-Agent Loan Approval System with Human-in-the-Loop","\u002Fblog\u002Fmulti-agent-loan-approval-human-in-the-loop","2.blog\u002F20260225.multi-agent-loan-approval-human-in-the-loop",{"title":189,"path":190,"stem":191},"The Inception of AI Infrastructure: Bottlenecks All the Way Down","\u002Fblog\u002Fbiggest-bottleneck-scaling-ai-compute","2.blog\u002F20260313.biggest-bottleneck-scaling-ai-compute",{"title":193,"path":194,"stem":195},"What I Tell Teams About Claude Code","\u002Fblog\u002Fwhat-i-tell-teams-about-claude-code","2.blog\u002F20260314.what-i-tell-teams-about-claude-code",{"title":197,"path":198,"stem":199},"The Hardest Part of AI Isn't the AI","\u002Fblog\u002Fthe-hardest-part-of-ai-isnt-the-ai","2.blog\u002F20260327.the-hardest-part-of-ai-isnt-the-ai",{"title":201,"path":202,"stem":203},"Claude Code Hooks: The Capability I Left on the Table","\u002Fblog\u002Fclaude-code-hooks-capability-left-on-the-table","2.blog\u002F20260401.claude-code-hooks-capability-left-on-the-table",{"id":205,"title":9,"authors":206,"badge":212,"body":213,"date":524,"description":525,"extension":526,"image":527,"meta":530,"navigation":531,"path":10,"seo":532,"status":533,"stem":11,"__hash__":534},"posts\u002F2.blog\u002F20220109.migrate-vue-2-with-vuetify-and-jest-to-vite-and-vitest.md",[207],{"name":208,"to":209,"avatar":210},"Chris Towles","https:\u002F\u002Ftwitter.com\u002FChris_Towles",{"src":211},"\u002Fimages\u002Fctowles-profile-512x512.png",null,{"type":214,"value":215,"toc":516},"minimark",[216,253,274,296,301,316,319,325,329,339,363,369,386,394,398,421,441,444,479,482,492,495,499],[217,218,219,220,227,228,233,234,238,239,244,245,249,250,252],"p",{},"So my main project at work is a ",[221,222,226],"a",{"href":223,"rel":224},"https:\u002F\u002Fvuejs.org\u002F",[225],"nofollow","Vue 2"," and ",[221,229,232],{"href":230,"rel":231},"https:\u002F\u002Fvuetifyjs.com\u002F",[225],"Vuetify 2"," site, but privately I have been playing with ",[221,235,237],{"href":223,"rel":236},[225],"Vue 3"," and loved the ",[221,240,243],{"href":241,"rel":242},"https:\u002F\u002Fstaging.vuejs.org\u002Fguide\u002Fintroduction.html#api-styles",[225],"Composition API"," to avoid ",[246,247,248],"code",{},"mixins",". Due to some new features, we are planning to build soon. I wanted to write it in ",[246,251,237],{},", to prevent needing to migrate it later.",[217,254,255,256,258,259,261,262,267,268,270,271,273],{},"I wanted to investigate how to migrate from ",[246,257,226],{}," to ",[246,260,237],{},". Furthermore, I planned to use the amazing ",[221,263,266],{"href":264,"rel":265},"https:\u002F\u002Fv3.vuejs.org\u002Fguide\u002Fmigration\u002Fmigration-build.html",[225],"Migration Build"," to allow ",[246,269,237],{}," to use most ",[246,272,226],{}," components during a migration period. Which is much less risky for a large project.",[217,275,276,277,280,281,284,285,288,289,227,292,295],{},"I took a rough hack at doing the migration leaving only a handful of pages to test over a day to see how likely the migration was. I had to upgrade ",[246,278,279],{},"Vuetify"," from ",[246,282,283],{},"2.X.X"," to an early beta version of ",[246,286,287],{},"3.X.X",". However I was unable to get anything more than a few ",[246,290,291],{},"v-cards",[246,293,294],{},"v-btn"," was working. A peer on another work team had said as much, but I hadn't listened. My bad.",[297,298,300],"h2",{"id":299},"vuetify-3-is-not-ready-as-of-2021-12-18","Vuetify 3 is not ready as of 2021-12-18",[217,302,303,304,306,307,309,310,315],{},"Unfortunately, ",[246,305,279],{}," is not ready for ",[246,308,237],{}," as of 2021-12-18. I tried the beta ",[221,311,314],{"href":312,"rel":313},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@vuetify\u002Fnightly",[225],"@vuetify\u002Fnightly",", but it's far from ready. The documentation said it's to ship in February but looking at the missing functionality I doubted it.",[217,317,318],{},"I joined the discord community and got caught up on the most recent updates. Basically it's going to take a little longer which is ok. It's open source and it's not like I've contributed any pull requests. It's been a great framework and I recommend it to everyone.",[217,320,321,322,324],{},"I'll update this post when it is ready and has support for ",[246,323,237],{},".",[297,326,328],{"id":327},"original-goal-vue-3","Original Goal - Vue 3",[217,330,331,332,335,336,338],{},"So the dream would be to get to ",[246,333,334],{},"vue 3",", but that's not practical without ",[246,337,279],{},". That leaves two options:",[340,341,342,349],"ul",{},[343,344,345,346,348],"li",{},"Replace ",[246,347,279],{}," with a different component framework",[343,350,351,352,354,355,358],{},"Don't upgrade to ",[246,353,237],{}," and keep ",[246,356,357],{},"Vuetify 2.X.X",[340,359,360],{},[343,361,362],{},"Upgrade to v3 once it's ready",[217,364,365,366,368],{},"To be clear, replacing ",[246,367,279],{}," has almost no upside for my employer.",[340,370,371,374,377,380,383],{},[343,372,373],{},"It would take a lot of time to convert the large codebase.",[343,375,376],{},"It is likely to introduce bugs",[343,378,379],{},"No improvement for the user",[343,381,382],{},"Time and effort retraining the team.",[343,384,385],{},"Moving away from a framework others in the company also use.",[217,387,388,389,227,391,324],{},"So it's pretty easy to decide to wait on migrating to ",[246,390,237],{},[246,392,393],{},"Vuetify 3",[297,395,397],{"id":396},"new-goal-vite-and-composition-api-with-vue-2","New Goal - Vite and Composition API with vue 2",[217,399,400,401,403,404,409,410,227,415,420],{},"Thinking about the problem I realized that a lot of the benefits of the migration to ",[246,402,334],{}," was the improvement of the tooling. ",[221,405,408],{"href":406,"rel":407},"https:\u002F\u002Fvitejs.dev\u002Fguide\u002Fwhy.html",[225],"Vite"," is so fast you have to see to believe. I follow ",[221,411,414],{"href":412,"rel":413},"https:\u002F\u002Ftwitter.com\u002Fyouyuxi",[225],"Evan You",[221,416,419],{"href":417,"rel":418},"https:\u002F\u002Ftwitter.com\u002Fantfu7",[225],"Anthony Fu"," on twitter so have been watching it come to life.",[217,422,423,424,427,428,433,434,437,438,440],{},"So I decided to try to migrate to ",[246,425,426],{},"vite"," and allow the ",[221,429,432],{"href":430,"rel":431},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fcomposition-api",[225],"@vue\u002Fcomposition-api"," with ",[246,435,436],{},"vue 2",". This would also make it easier to upgrade to ",[246,439,237],{}," once it's ready.",[217,442,443],{},"So the new goal looks like this.",[340,445,446,454,460,465,470,475],{},[343,447,448,449,227,451],{},"keep ",[246,450,436],{},[246,452,453],{},"vuetify 2.X.X",[343,455,456,457],{},"remove ",[246,458,459],{},"@vue\u002Fcli-service",[343,461,456,462],{},[246,463,464],{},"webpack",[343,466,456,467],{},[246,468,469],{},"babel",[343,471,472,473],{},"add ",[246,474,426],{},[343,476,472,477],{},[246,478,432],{},[217,480,481],{},"This gives a lot of benefits and a clear upgrade path!",[217,483,484,485,227,487,433,489,491],{},"It was pretty easy to clone a simple example repo with ",[246,486,436],{},[246,488,453],{},[246,490,459],{},". And tested out the upgrade there.",[217,493,494],{},"Once that worked I then did the upgrade on the more complex monorepo at work.",[297,496,498],{"id":497},"update-2022-07-12","Update 2022-07-12",[217,500,501,502,507,508,511,512,515],{},"With ",[221,503,506],{"href":504,"rel":505},"https:\u002F\u002Fblog.vuejs.org\u002Fposts\u002Fvue-2-7-naruto.html",[225],"Vue 2.7 \"Naruto\" Released"," I'm now on ",[246,509,510],{},"Vue 2.7"," and was able to remove the ",[221,513,432],{"href":430,"rel":514},[225],"!",{"title":517,"searchDepth":518,"depth":518,"links":519},"",2,[520,521,522,523],{"id":299,"depth":518,"text":300},{"id":327,"depth":518,"text":328},{"id":396,"depth":518,"text":397},{"id":497,"depth":518,"text":498},"2022-01-09","So my main project at work is a Vue 2 and Vuetify 2 site, but privately I have been playing with Vue 3 and loved the Composition API to avoid mixins. Due to some new features, we are planning to build soon. I wanted to write it in Vue 3, to prevent needing to migrate it later.","md",{"src":528,"alt":529},"\u002Fimages\u002Fblog\u002Fcss-migration.jpg","css on screen",{},true,{"title":9,"description":525},"published","uKTT9kQfTbhkza-0AeImkqv6_Yg2eu0yl7RmbaTAZNA",[536,538],{"title":5,"path":6,"stem":7,"description":537,"status":533,"children":-1},"So first a full disclosure: I was late to get on the testing bandwagon.",{"title":13,"path":14,"stem":15,"description":539,"status":533,"children":-1},"Reflecting on my career and the type of developer I am.",1776221196452]