Reflections on Updating to Nuxt 3 and Vuetify 3

This article is the 22nd entry for the Yuru Web Study Group @ Sapporo Advent Calendar 2023.

Since it's a "Yuru (casual)" web group, I'm writing this casually. 😇
I had a lot of thoughts about books I read this year, thoughts on reviews, and many things I wanted to write about...

Out of those, I'd like to talk about the update that I've spent the most time on this year.

It feels like I've been working on upgrading to Nuxt 3 since the beginning of the year. Since Vue 2 support ends this year, upgrading existing applications was a must.

The stack we are using includes Nuxt / Vuetify / i18n / Vuex / and other libraries (like ApexCharts and blockly.js).
I thought the biggest challenge in updating the application would be the update to Vuetify 3.

I haven't reached the "migration complete!" stage yet as I am still working on it, but I'm writing this down as a topic for this year's Advent Calendar.

Personal Impressions

First, I'll share my personal impressions of working with Vuetify 3.

At the beginning of this year, when Vuetify 3 was released, I checked the status of the components we use to verify if we could update. However, the most frequently used v-data-table remained unsupported, making it impossible to migrate our production environment (it was finally supported in the 3.4 release last month).

Because of this, at the beginning of the update process, we were considering whether to use Vuetify 3 or switch to another framework like Tailwind. With all due respect to those who like it, personally, I think it would have been better to use another framework and build our own components.

However, it's difficult to judge how much we depend on it in a production environment (functional dependencies) without changing existing behavior, so we decided to proceed with the update to Vuetify 3.

If we had the time/budget to rebuild, I felt it would be better to use a Headless UI with fewer dependencies while organizing the components. (This is just my personal opinion.)

The Response of Components I Wanted to Use Was Slow

The most difficult part, or rather the part where I was left waiting, was the slow response time for the components I wanted to use. I spent days staring at the following page:

https://vuetifyjs.com/en/introduction/roadmap/#in-development

I remember having conversations about "When exactly is the third quarter?" (haha).

In particular, I was waiting for the support of v-data-table. While this component was in the Labs (research) phase, I avoided using it because of the potential for future breaking changes.

I proceeded with the parts that were ready to be implemented.

Documentation Remains in Options API Format (With Many Changes)

From Nuxt 3, I have been working on rewriting code from the traditional Options API to the Composition API.
In the new environment, I am rewriting parts that were written in the Options API in Nuxt 2 using the Composition API.

Even if the Options API is not going away, I believe it is better to rewrite using the Composition API considering TypeScript type definitions and ease of writing.
(I have my own thoughts on the procedure, though...)

I started rewriting with the Composition API, converting Mixins to Composables, and so on. However, the crucial Vuetify documentation remained in the Options API format. 😇

Therefore, when rewriting existing code to the Composition API, the following mental translation is required:

1. Rewriting while mentally converting the existing Options API format to ref.
2. Verifying if it can be integrated into Vuetify components after rewriting to ref.
   • The biggest struggle was: How do I handle options and syntax?
   • Are the options I used before missing, or has the syntax changed? etc...

Personally, I wished they would document the changed parts.
It took time to deepen my understanding by reading the source code and documentation.

Vuetify Icons Not Displaying with Material

While deploying Vuetify 3 in Storybook and fixing the appearance of components, icons I had been using stopped displaying. I searched through various articles, but I couldn't find the official documentation.

https://zenn.dev/ichii731/articles/66b4cf79d2cae6

It seems that when using material icons, setting up icons is required. (I wasted about 3 hours on this.)

import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
const vuetify = createVuetify({
   icons: {
       defaultSet: 'mdi',
       aliases,
       sets: {
           mdi,
       },
   },
});

Conclusion

Starting from scratch with Vuetify 3 is one option (due to time constraints, etc.), but under a production environment, there are many considerations, and I am struggling.
There are many other challenges besides Vuetify, and the update to Nuxt 3 / Vuetify 3 (Next > i18n and other libraries) seems to be taking quite a while.

Although I have left many technical notes regarding this matter, I would like to continue outputting the parts that haven't been documented or verbalized yet.

I will continue the update work next year and do my best to complete it. (Sweat)

Bonus

Finally, I have made public the repository I use for verifying libraries and such. I am tinkering with code there, mainly focusing on how to write test code or how to write things using the Composition API.
I hope it serves as a reference for someone (haha).

https://github.com/redamoon/nuxt3-vitest-vuetify3

Happy Holidays! 😄

Update on January 11, 2024

The sample code was written in the Options API, but by setting the following, you can switch the sample code to the Composition API:

• Select Composition API from the menu bar settings.