Porting AOM from Angular to Vue

22 October 2025

Every week Dependabot sends me security advisories about my most vulnerable, out of date GitHub repos, and every week that Age of Mythology Board Game Helper I once wrote in Angular tops the list by a mile. How many packages are in the Angular ecosystem?? How can there be so many and so vulnerable??

I still want the app to exist. But I want the warnings to stop.

I briefly tried upgrading it to a newer Angular version but that was a nightmare, and it wouldn’t solve the long term problem when new versions were later deemed to be vulnerable.

I wanted to rewrite it from Angular, which I don’t know or use at all, into a tech I know and enjoy, like Vue 3. This sounded like a lot of drone work though so I got Claude involved.

The LLM rewrite

I moved the angular app into a new subdir of the project, fittingly called angular and made a new empty dir for vue.

I used VS Code with GitHub CoPilot, with Claude Sonnet 4.5 selected, in Agent mode.

My initial prompt was pretty simple:

Look at this Angular app. We are going to rewrite it in Vue 3. Keep it as simple as possible. The vue app does not need any unit testing. You will init the Vue app in the /vue dir, imitating the angular app in /angular. Please make a plan before starting.

#file:app.module.ts #file:main.ts #file:index.html

It had some trouble figuring out what I’d done with the file dirs even though I explained it. I also have a perennial issue with GHCP failing to read results from terminal the first time, so I have to close all the magic terminals and tell it to try again.

In the end I ran one or two commands on Claude’s behalf (I copied out the commands it had printed to the Agent panel) to stand up the Vue project.

Course correction with GHCP

I’m learning that when GHCP is waiting for input or authorisation to run a terminal command, I can interject. Like sometimes my npm version is wrong, and it’s about to go off on a wild tangent working around it, so I just say:

I’ve installed node 22.20.0 and run the npm create and npm i commands for you, please check the content of the Vue directory then continue

Other times it guesses super wrong on the source of an error, e.g.:

The issue is that the file uses “smart quotes” (curly apostrophes) in some strings which TypeScript is misinterpreting. Let me check the actual content by running type-check to see what the error really is: npm run type-check 2>&1 | head -50 The issue is with the apostrophes. It looks like when I copied the text, some apostrophes became smart quotes (‘ instead of ‘). Let me check the exact character: sed -n '63p' /d/git/aom-bg/vue/src/data/allUnitsData.ts | od -c | head -3

And while it’s waiting to run sed, I, a smol brain developer, interject:

No mate, some of the unit specialText entries contain apostrophes and you need to escape those

In fairness, I don’t find any of this that strange, as many actual real human devs also love to overcomplicate solutions while missing the obvious (myself included).

I think it’s been documented that Claude’s long delcarations of victory are annoying. It will give you a looooong markdown report to prove that it’s finished its checklist and koded everyfing to spek.

Unforunately, if it tried to npm run dev and couldn’t get access to the output, it will declare victory even when it doesn’t build or run. So I did have to make it check its work and fix the actual errors:

Please run npm run build and check output for errors. Please don’t declare victory any more, that’s a waste of tokens

[N.b. it looks like I say “Please” to LLMs a lot. This is only partly due to my concern for appeasing our future robot overlords]

After this fix it was done-ish…

The cleanup

To keep it brief, here are the major shortfalls from Claude’s side:

• It copied some CSS into scoped styles where they didn’t need to be, and transcribed them wrong, changing 8.5rem to 10rem, for example. It also made up some colour codes that don’t exist in the original. I don’t really understand why.
• In general, LLMs have poor knowledge of the Tachyons CSS library, which I use for everything, so they tend to reinvent/duplicate some of its CSS classes, and hallucinate others.
• It didn’t clean up all the “Welcome” cruft that comes with a standard Vue boilerplate project.
• It inexplicably abstracted the name “Age of Mythology” from static text into a variable… just in case I ever wanted to change it.

These are all pretty minor and I was happy.

I think in future I am going to get LLMs to read the Tachyons Table of Styles to avoid misunderstandings.

Performance

Now we’re done with LLM talk and squarely into Angular vs Vue territory.

With both variants built for production and shipped via Netlify:

*Angular split the JS into three files, Vue only one. Vue did some route splitting, so that additional JS was downloaded on another route (/unit/something) when needed.

†This is slightly unfair, beacuse Angular uses scoped styles, which I rationalised for the Vue development, moving them into a common stylesheet. This likely reduced class size, specificity of name, and duplication.

Development file size without packages:

Angular: 582 kB Vue: 209 kB

I am not measuring with packages because I don’t have the patience or disk space for an npm install on a 5-year old Angular project.

Results

The new shiny Vue version is now live at https://aom.netlify.app and you can click around it right now.

I like it. It feels snappy and it looks the same as before. ⚔

If you want to check out the final PR porting to Vue, you can do so.

We talked frontend frameworks the other day at work, and it strikes me that frontend is now just a lot more portable in the age of LLMs, when they’re this quick and capable at a total rewrite.

Let’s remember to use AI thoughtfully, weighing its positives and negatives, accepting economic value where it’s real, and keeping those human brains exercised and working! 🧠🏋️