Premiers retours après migration vers Nuxt 4
Récemment j'ai sorti une nouvelle application qui s'appelle writizzy. Cette application utilise Nuxt 4 et Nuxt UI pour le frontend. En parallèle j'ai toujours hakanai qui tourne actuellement sur Nuxt 3.
Et en bossant sur Nuxt 4, j'avoue avoir particulièrement apprécié Nuxt UI et le résultat sur writizzy s'en ressent. Alors je me suis lancé la petite tâche de la semaine de migrer hakanai également sur Nuxt 4.
Bref, est-ce facile de migrer ? Pourquoi le faire ? Et quelles sont les premières impressions ?
Nuxt 4
Je pars du principe que vous connaissez déjà Nuxt. Ou pas ? Si c'est pas le cas, c'est LE framework frontend pour faire du SSR avec Vue.js et il joue globalement dans la même cour que Nextjs. C'est, pour ma part, mon premier choix pour faire du web aujourd'hui.
Et pour ceux qui ont connu la migration Nuxt 2 vers Nuxt 3, quand on parle de migration il y a souvent des sourcils qui se froncent car l'expérience avait été relativement désastreuse. Mais cette fois avec Nuxt 4 la migration est plutôt fluide. Et c'est plutôt une bonne chose puisque c'était la promesse de la version précédente : apporter une meilleure modularisation pour une plus grande simplicité d'évolution.
En fait Nuxt 4 n'est pas en soi une révolution, mais c'est avant tout une évolution. Je dis ça parce que même en relisant les releases notes j'avoue ne rien noter de vraiment remarquable sur le passage à Nuxt 4.
Alors si. Ça parle de performance. Et globalement, mon premier ressenti est mitigé. Oui, c'est sans doute plus performant au runtime. Mais alors l'expérience de dev s'est sacrément dégradée. Mais j'y reviens plus loin.
Mais revenons sur Nuxt 4. J'ai été un peu rapide en disant qu'il n'y avait pas d'évolutions notables. En fait la principale nouveauté, celle qui m'a fait migrer, c'est le passage en open source de Nuxt UI Pro et la disponibilité de tailwind 4 qui va avec.
Nuxt UI / Nuxt UI Pro
Jusqu'à présent, j'utilisais beaucoup flowbite ou preline pour ajouter des composants un peu évolués. Je faisais majoritairement du copier coller pour récupérer le markup et puis je rajoutais toute la couche JS pour que ça marche. J'ai également intégré DaisyUI pour deux trois trucs comme les Select Menu ou les dropdowns. Mais au final ça m'a donné un patchwork pas toujours cohérent côté frontend. Nuxt UI est une librairie complète de composants qui remplace aisément tout ce que je viens de lister. Cette librairie était auparavant scindée en deux avec une partie open source gratuite, et une partie payante, un boilerplate comme certains diraient.
En utilisant Nuxt UI sur Writizzy, tout est beaucoup plus homogène et l'usage de themes tailwind aide à conserver cette homogénéité.
Bref, c'était pour moi le critère majeur pour passer à Nuxt 4 sur Hakanai.
Migration et premières impressions
La migration comme je l'ai dit est plutôt simple si on considère simplement que l'application doit marcher. J'ai dû changer la structure des répertoires mais ça reste assez trivial. Il faut changer quelques imports, ce qui se fait assez facilement à coup de "Chercher/remplacer" sur l'ensemble de la base de codes.
Ça se corse un peu sur l'usage de tailwind puisque la façon d'inclure Tailwind diffère entre Nuxt 3/Nuxt tailwind et Nuxt 4 / Nuxt UI. Mais on retrouve assez rapidement ces billes. Par contre avec cette migration j'ai cassé l'intégration entre Tailwind et DaisyUI. C'est ce point qui m'a coûté le plus cher en temps car j'ai dû repasser sur tous les endroits où j'utilisais du markup spécifique à DaisyUI pour le remplacer par son équivalent Nuxt UI. La première étape m'a coûté 1 à 2h max. La seconde s'est déroulée sur 2 ou 3 matinées.
J'ai une certaine appréhension, je n'ai pas encore déployé cette nouvelle version de Hakanai parce que je veux être sûr d'avoir bien tout testé et je veux pas laisser aux utilisateurs le soin de le faire à ma place. Mais ça ne devrait pas tarder.
Bon maintenant, passons au point un peu plus désagréable.
Oui, les performances au runtime semblent assez bonnes. Je peux pas vraiment faire d'avant après sur writizzy mais sans aucun effort j'ai atteint le score parfait sur lighthouse. (Vous saviez qu'il y avait des confettis quand on atteint 100 partout ?)
Par contre en dev, c'est une autre histoire. Il y a de très nombreuses erreurs lorsqu'on lance les applications.
Le serveur reboote un peu sans raison parce que le fichier nuxt.config.ts aurait été modifié, ce qui n'est pas le cas. Et parfois, juste ça plante et faut tout relancer.
Quand au temps de démarrage, il est significativement plus élevé, largement plus que mon backend Java/Kotlin. Alors, je sais que Nuxt prévoit bientôt de passer sur une nouvelle version de vite.dev incluant rolldown, un javascript bundler écrit en Rust qui devrait significativement améliorer tout ça. Mais en attendant, l'expérience de dev souffre pas mal.
Ça reste acceptable et je ne reviendrais pas en arrière, notamment pour le bénéfice de Nuxt UI. Mais c'est aussi parce que je bosse tout seul. Je ne suis pas sûr que j'aurais pris ce type de décision si je bossais encore dans une équipe plus large.
C'est un peu le point noir de cette migration et j'attends avec impatience que ce soit résolu.
