A Simple Web Project, And Some Thoughts About Vuetify 3
Maybe the real stable release is the friends we made along the way
I took a break from “Rudeness Translator” (a web application that uses GPT to translate rude internet comments into polite ones) to look at a new project with Smack. Our conversation went something like this:
Smack: I’m going to try to bang out a web application tonight to help build recipes and calculate macros. Do you have frontend advice?
Me: Handjam Vue and Vuetify into it, even if you don’t need it. Auto-generate a basic website in about five minutes with a million unnecessary packages, and whenever you want anything, copy and paste it from the Vuetify website without understanding anything you are doing
I thought it would be kind of funny to take what he had at the end of the night, and do exactly that. Here is what he put up on Github
Smack: I think GPT is really gonna clutch this
Me: No, don’t give in
Smack: The future is now, old man
The search feature did not work, but I thought it was nice — “duplicate” or “delete” copies or deletes a row, respectively, and every command automatically updates a calories or protein calculation. I thought I would use Vuetify and see if I could replicate this exact functionality in five minutes.
tl;dr it took me a lot longer than five minutes.
My Confusion About Vuetify 3
Is this a good use case for Vue/Vuetify? Not really. Because it is a toy program and will never be on anything important, though, it served as a learning experience. The lesson I got was this: Vuetify 3 may not be stable for v-data-table yet.
You can still set up a project using the Vuetify documentation, as you had before in Vuetify 2. I quickly ran into a problem…no v-data-table.
This was a known issue a year ago, when Vuetify 3 was out but some components were not ready. The temporary solution was Vuetify labs, but I found some of their wording disturbing.
Components available through Labs are considered NOT production ready and only to be used for testing purposes. Breaking changes will be introduced in patch releases and no support will be provided.
— Source
I found this Reddit post solely dedicated to asking if Vuetify 3 v-data-table is stable. Some have remarked that the Vuetify labs v-data-table works fine for them, and I had no issues with it, but suddenly this little toy project has become a window into the latest Vuetify news. To put it succinctly:
- Many people use Vue for important stuff
- Many people use Vuetify for important stuff
- Many people have migrated to Vue3, and want Vuetify3
- Many people who want Vuetify3 also need components like v-data-table
Here is what does not make sense to me: The project now uses Vuetify 3.3.15. This GitHub comment from John Leider himself said v-data-table would be supported in Vuetify 3.1. Reddit posts from the below, with comments made just five days ago, seem to corroborate what I am seeing: The latest Vuetify apparently does not support v-data-table, prompting us to use lab.
That being said, they are clearly working on this. I saw John Leider push an update as recently as today, Labor Day, and they have been responding to complaints for more than a year. I have no clue what kind of budget, team size, and project backlog they are working with. To have any semblance of an idea I would have to contribute to my own fork of the project myself.
That being said, I agree with everyone who is using Vue/Vuetify for production code. The v-data-table is an important component/feature, so it would be nice if I had clarification on why it was not working for me. Is it supported now? If not, when will it be supported? If this is not for a long time, we may need to switch to alternatives for important code.
Obviously our nutrition counter is not important code.
My Work And Pull Request
So, to be completely clear, the pull request message above is a joke. This is not a serious thing made on a serious project. I had considered using more emojis, but the fire emoji seemed to suffice.
I found a few Codepen examples from people adding “total” rows to the Vuetify v-data-table example using JavaScript reduce, which is worth looking into, but what I did was much simpler. Add a row? Track the numbers added. Remove a row? Remove those counts.
Things to (possibly) do going forward:
- Fix edit button. I forgot to add that to the pull request comment
- Add customized backend and database. Seems like a pretty obvious use case for a save feature
- Do a comparison. Take a closer look at how Smack’s vanilla JavaScript/HTML/CSS work functioned, and what a framework like Vue brings to the table. It could even be a good opportunity to try out other frameworks
- Figure out what is going on in the Vuetify community. Is 3 usable? Is 3 stable? If so, what am I doing incorrectly? If not, what exactly is this community dealing with right now, and how does it compare to other people who built open source projects atop Vue?
Closing Thoughts
A frontend web framework is something that can make development much easier…or not. In a very simple case, it can add unnecessary dependencies and make things more confusing. The nice thing about a simple HTML/CSS/js webpage is that you do not need a million packages to deploy it.
In important, complex production projects, frontend web frameworks can arguably add much more value.
