Vue 3 Migration - Call for Feedback

[vabene1111]

With vue2 having reached its end of life I am planning on migrating tandoor to vue3. I will use that opportunity to also rethink the whole frontend stack, from tooling to UI library. Before embarking on this journey I would like to ask for your feedback.

I will list the different options I have found so far below and update this post over time with your feedback. Please only participate if you have SUBSTANTIAL EXPERIENCE (e.g. have worked with or at least intensively studied the technology before) in the topics you are talking about. There might be another time where I will simply ask for "feelings" about certain things where everyone can participate.

Tooling

I am thinking of switching from webpack to vite. I have already verified that the toolchain works for what tandoor need with a different project. I feel like vite is a lot faster and might produce more performant applications.

UI/Components Framework

The most visible decision to make. Until now tandoor has relied on bootstrap because back when I started it there wasn't much else popular. With bootstrap-vue not really being as nice in Vue 3 as it was in Vue 2 I am thinking about switching frontend Frameworks.

• bootstrap-vue-next seems to be a bit incomplete and also does not have huge amounts of components. Would on the other hand require less work to migrate/learn
• vuetify seems to be one of the most popular frontend frameworks but I am not sure if the very "technical" style fits a recipe application well. Could maybe be changed by theming.
• element plus seems to have many components and a good documentation but seems to be developed at least partially in China which might complicate communication in issues/reading notes/code
• quasar has tons of components and appears to be fast and performant but I find the website a bit confusing/strange at times

Additional Frameworks

Obviously we are going to use Vue 3, as I really like working with Vue. Besides that there seem to be some major frameworks that change the way we develop.

Because I want to switch to a proper SPA which will eventually allow SSR there needs to be proper view state management on the frontend. From what I see vue-router was the defacto standard here for a while. There also seems to be Nuxt.js as a very popular framework to handle a lot of the management work. It also has an interesting feature called layers that might help support the plugin architecture that tandoor already has and which I want to improve in the future.

---

I would love to get some feedback on these thoughts, have you worked with any of those tools/frameworks before, do you know any others that I might have missed? Anything else?

[Polymeta]

Hey there!

The place I work at was in a similar situation: Bunch of apps in vue2 and bootstrap-vue and now the question is what next?

We initially waited for ages for bootstrap-vue, but we have now moved onto https://primevue.org. It has showed to be super flexible with either being completely unstyled (and for you to style everything) or with theming presets (has a bootstrap one for example). I personally find the documentation to be quite nice as well and it's been gaining a lot of traction I believe. I can't speak much for the other frameworks, we looked into some of them as alternatives but haven't found them to nearly as flexible as we needed them to be.

We also did vue-cli to vite and we never looked back lol. The performance enhancements are definitely noticeable especially at dev-time.

For state management we use a combination of vue router and vuex (direct store). With the typescript support it's quite flexible for us which we appreciate.

Happy to answer follow-up questions of course, but hope this helps.

[frudolph77]

Hey @vabene1111

regarding your post on discord. I'm not a Fullstack Developer, but I have some experience, albeit little, with JS development.

So for Tooling I would definitive go with vite as it's the more modern bundler for JS application. Especially during the development phase of the app it should work much smoother. I've had always trouble with webpack and outdated dependencies inside and it was slow as hell, can't tell more.

For the UI, you can't compare bootstrap with a component framework like vuetify and so on, as bootstrap is no component framework. In bootstrap you work with plain html and css, instead of 'predefined' components.

For the selection of the component framework also take a look at https://ui-libs.vercel.app/

If you like to use vue and SSR then you should go with nuxt.js instead go next.js just because of

Nuxt.js: A robust framework built on top of Vue.js, designed to create server-rendered Vue applications with ease. Nuxt.js simplifies and streamlines the development process, making it easier to create universal, single-page, and static generated applications.
Next.js: A powerful framework built on top of React, which also focuses on creating server-rendered React applications. Next.js is well-known for its simplicity, performance, and scalability, enabling developers to build web apps quickly and efficiently.

(see https://medium.com/@starcc/nuxt-vs-next-which-one-is-better-for-your-project-e2c60741f5f5) there are several articles comparing next.js nuxt.js and others.

Just my 2, not so relevant, cents.

I haven't used any of the mentioned tools, yet. I was just looking at vue a few das ago, to eventually rewrite a react app, to learn new stuff.
On business I've mainly used webpack, rollup and lerna for bundling (had to use them) and for the frontend node.js, react, redux, and MUI

[Daenara]

Hello,
I work as a full stack developer in a small company and I work regularly with vue3 and vuetify. The change from webpack to vite is something you should do to get away from the vue-cli which is deprecated as far as I am aware.

As for the frameworks, I have experience with vuetify and I can tell you it can be themed, if all you want to do is a color change. Most input elements also have a few different variants that you can either configure one as a global default, or just put the variant on every element. Changing more than that involves overwriting sccs variables, which is possible but slows the start of the development server down a bit because it has to compile, annoying while developing, but no difference on actual releases. Even more can be done by default css, but as soon as you manually overwrite the vuetify styling, the question is, is vuetify the best choice. I do a bit of that just to adjust spacing on mobile devices and small things, but if you change bigger things, vuetify might not be the best fit.

That sad, there are also some reasons why you might not want to use vuetify, one of the biggest one being their update philosophy. We were waiting for vuetify to be ported to vue3 before switching and by the time they "released" it, 30% of the features of the previous vuetify version were plain missing, making it impossible to port, other features were ported and buggy as hell, and their data table, while it is added by now, still does not have the mobile view it used to have in the previous version. All in all, it felt like a beta version, not a release. Later on, they also decided doing breaking changes on patch version level, which made me basically pin a specific version of it and manually checking every functionality every time I manually update it.

Another alternative that is missing on your list, and that I would look into the next time I start something from scratch is the Ionic Framework. We use Ionic Capacitor for our mobile apps and the thought Ionic put in there, as well as the ease of use compared to Cordova impressed me, and if they did as good as a job on their Framework, it would be better than vuetify.

We also use vue-router, which works great. The only headache it gave me so far was when I wanted to remove the # from the url by switching to another type of routing and predictably, I had to reconfigure the tomcat it was running on to not show a bunch of 404 because the vue-router urls obviously did not exist as files on the server. So the headache was less the router, and more the server configuration.

For state management we use vuex which was the recommended store for vue for years, but lately they switched and recommend Pinia instead. Since they switched, I guess it has some advantages about vuex, but since I discovered that directly after updating our vuex to vue3 I did not look into it more because vuex is still actively maintained and I did not feel like switching again.

[hendrikbl]

I 100% agree. I was developing and setting up multiple projects from scratch using Vue and Vuetify.
With Vue 2 we were using Vue CLI + Vuetify + Vue Router + Vuex. Since Vuetify 3 finally supports most of their original components we migrated the whole project by bootstrapping a new project using Vite + Vuetify 3 + Vue Router + Pinia. Pinia is now the defacto default state management library for Vue and Vuex will not get new features in future so it's highly recommended to use Pinia. It's also nicely integrated into the Vue dev tools which are great. This and the great typescript support throughout all those libraries makes development very straightforward and - most of the time - fun.

Also with Vuetify 3 it's theming capabilities were improved tremendously giving you the ability to create custom blueprints and custom CSS to style almost everything globally and set defaults for components attributes and classes. This allows to recreate the look and feel of the Google's material design 3 Guidelines which are (in my opinion) not very technical looking. All in all I really love working with Vuetify 3. The update philosophy aside.

We are also using Vite PWA and it works like a charm. I have no experience with SSR though.

Edit: I can't really say much regarding nuxt. I have used it in the past for mini projects but that was in the Vue 2 days. It still seems to be very well supported and very widely used. But not everything supports nuxt our if the box and I personally prefer to setup external libraries myself and not rely on nuxt extensions which is why I never looked into it for our projects.

[mathisloge]

Definitly would recommend switching to Pinia, too

[vabene1111]

Pinia is actually already being used, I started using stores after pinia was the default so never had vuex. But thanks for the feedback, I like it a lot as well.