In this thread @hluz asked me to share my experiences updating a Meteor 2/Vue 2 app to Meteor 3/Vue 3. In this post below I am answering to him. I’m doing this in a separate post as it will hopefully make it easier for others to find this information in the future.
The app in question is Tuumik. A team management app primarily used by law firms. Tuumik is not open source, but it is free to use for small teams and we recently made it source-available. You can see the source here: GitHub - tuumikapp/tuumik: Modern Team Management Software for Hybrid Work
Although the app has been in use for years already, the public repo contains only code after we made the transition to Meteor 3 and Vue 3, restarted semver and made the source code available. A couple of months ago Tuumik was still on Meteor 2 and Vue 2 (and originally even on Blaze years ago). So that was the starting point for the update.
With that out of the way, let’s talk about updating.
Starting with a minimal starter project
My primary recommendation is to break up the updating process by:
- first creating a new Meteor 3 project with
meteor create starterwith the Vue template - then manually going over the package.json and .meteor/packages files in the new project to make sure you are using the right dependencies
- then, once you have a minimal working Meteor 3 and Vue 3 app, you start copying over files from your actual app one by one and making necessary updates to the code.
The primary reason for doing it this way is to isolate issues and be able to deal with these one by one. This will also enable you to have a better sense of progress, which at least for me is very important in larger tasks.
Getting Vue dependencies sorted
In short, to make Vue 3 work with Meteor 3, your .meteor/packages file should contain:
jorgenvatle:vite-bundler@2.2.0
And your package.json file should contain:
“meteor-vite”: “^1.12.0”
“vite”: “^5.4.10” (this should be under devDependencies)
“vue”: “^3.4.14”
“vue-router”: “^4.2.5”
For dependencies, you can get inspiration from here and here.
Updating Meteor and Vue together
For us the goal was to update both Meteor and Vue from version 2 to version 3 together in one go. Partly because I had the impression that updating one independently from the other would not be possible. This impression might have been wrong since:
- The meteor-vite package seems to work with Meteor 2 as well, so it might be possible to update to Vue 3 using it and then do the jump to Meteor 3 at a later date
- A week ago @mrspark in this thread let us know that they have forked the vue-meteor package so that it allows Vue 2 to work with Meteor 3.
Despite these options, my preference still is still to do it together - creating a minimal starter project with both Meteor and Vue updated to the latest versions and then copying everything over bit by bit. To me it seems that like this it is far less likely to get stuck in some obscure situation with conflicting dependencies. Doing updates like this, everything in one go, is of course not always possible for production apps simply for business reasons.
No Vue 2 packages
As you can see, different from your Vue 2 project, the akryum:vue-component Meteor package is no longer used. And also the vue-meteor-tracker npm package is not used either. A few words on the latter.
If I recall correctly, the Vue 3 template used by meteor create does include vue-meteor-tracker in its dependencies. I think this is by mistake. I could not get that package to work with Vue 3.
My solution was simply to use Meteor’s own Tracker directly in Vue instead of having a package do it for me. I have described this approach in more details in this post.
It is more verbose than before, but one less dependency. In Tuumik’s repo this code is between comments like here.
Maybe at some point a new Vue 3 package will appear which will handle this for us, like vue-meteor-tracker did in Vue 2. But for now, this approach works.
Actually porting the app
Once the minimal starter project was up and running correctly with Meteor 3 and Vue 3, all that was left to do was to copy over code from the actual repo piece by piece, updating each file in the process.
For Meteor code, that primarily means sprinkling async and await keywords in formerly synchronous code. It seems dauting, but in reality it goes really fast. The key here is to take it one file at a time and deal with any issues as they appear.
For Vue code, that primarily means going over single file component files and converting code to use the Composition API (not strictly necessary, but that was my preference). It also meant replacing Vuex with Pinia. Again, it seems daunting at first. But if you break it all down into small components and simply move file by file, it will go smoother than you might expect.
References
In this process the best thing you can have is reference projects that you know work. So when questions arise, you can simplly go and have a look at how things are solved in other projects.
For this purpose I would recommend to look at the examples by @jorgenvatle here. Hopefully Tuumik’s source will help out as well.
Good luck updating!