Disclosure: The words in this post were not AI-generated or altered in any meaningful way. Spell check and other tools were used, but all content and phrases are my own creation.

I wanted to write about the experience of migrating the FileBrowser Quantum from vue 2 to vue 3 because it took a lot of strategy to do smoothly. I enjoy working with Vue but the experience of moving between versions was quite bad.

The original filebrowser application took almost 1 year to complete the migration and I forked the repo in the middle of the migration before it was finished. In hindsight, I am still glad for this, because it gave me valuable experience in migrating a large Vue application and the opportunity to think about components that were not needed.

I wrote about my ire for unnecessary dependencies which node modules are a big part of. I later wrote about some things I did to simplify the application so migration could be more easily done. This is the final post I will make about my experience finishing it.

Why it took so long

I was mostly to blame for the delay. Sure, it took me less time than the original repo, which had one primary migration PR which took 8 months to merge! My problem was that I kicked the can down the road and said I would handle it later after a couple of different attempts I made in a day were insufficient. So, I left it alone, until I realized I lost interest in developing the repo because I knew I needed to migrate and that was always in the back of my mind.

So, in version v0.2.6 I finally completed the migration!

How I handled the migration

In my previous posts, I mentioned I would choose a reduction first strategy. I removed many unnecessary dependencies by replacing them with a few lines of simple code that accomplished the same thing:

First, in version v0.2.6, I started preparing for the migration:

1
2
3
4
5
6

In prep for vue3 migration, npm modules were removed:
js-base64
pretty-bytes
whatwg-fetch
lodash.throttle
lodash.clonedeep

Then, in version v0.2.6 I finished the migration:

1
2
3
4
5

removed npm modules:
vuex
noty
moment
vue-simple-progress

In total there were 9 different dependencies were removed. All of which would have complicated the migration if I chose to keep them around. It also helped reduce bundle size, making the site just a little bit quicker.

Ultimately, the Vue 3 challenges were quite minimal (besides dependencies). There were a few state-related changes and the switch to vite was the most significant. However, the biggest hurdle (unrelated to vue itself) was that dependencies had their own dependencies that required certain vue versions. Which is, in my opinion, the worst part of a tech stack… untangling the web of dependencies.

After the migration

Once the migration was complete, I was able to make a lot of great changes very quickly. It’s very clear that having a site held back by old versions slowed down my interest in the site and my morale. I learned a lot about what to do and not to do, but overall I feel pretty happy with how it went.

Take a look at how much faster The releases have been since the migration:

2024 FileBrowser Quantum Releases Summarized:

You can see the pace clearly picked up! In the first half of 2024, I didn’t make any significant changes. Once the migration was completed, I was able to work on a lot more things.

I am glad its all done and looking forward to making some of the more meaningful changes that I have wanted to do for a while.