EN
Všechny články
10. října 2026

Čtyři aplikace na Vuetify 4: co oficiální codemod nezvládne

Převedl jsem čtyři starší aplikace v Nuxtu z Vuetify 3 na Vuetify 4. Oficiální nástroj vuetify-codemods udělá většinu práce, ale ne všechnu. Tady je postup, který fungoval, a dva skripty, které mi ušetřily nejvíc času.

Nejdřív ověřte, že se aplikace vůbec sestaví

Starší repozitáře mají zastaralé závislosti, které s Vuetify nesouvisí. Jedna z mých aplikací se nesestavila ani před migrací, protože jí mezitím zastaral modul pro překlady. Kdybych začal rovnou s Vuetify, hledal bych chybu na špatném místě.

Takže: nová větev, npm install, npx nuxt build. Teprve když to projde, má smysl pokračovat.

Postup

  1. npm install vuetify@^4 (a novou verzi vuetify-nuxt-module, pokud ho používáte).
  2. Vstupní styl vuetify/lib/styles/main.sass přepsat na vuetify/styles.
  3. Spustit codemody na všechny složky se soubory .vue.
  4. Dorovnat to, co codemody vynechaly.
  5. Sestavit, spustit a projít aplikaci v prohlížeči.

Codemod chce terminál

vuetify-codemods je interaktivní: ptá se, které úpravy použít, a bez terminálu se nespustí. Ve skriptu nebo v CI tedy jen tak nepoběží. Pomůže mu podstrčit pseudoterminál a každou sekundu poslat Enter, protože všechny úpravy jsou předvybrané:

#!/bin/sh
GLOB="${1:-{pages,components,layouts}/**/*.vue}"
(for i in $(seq 1 60); do sleep 1; printf '\r'; done) \
  | script -qec "npx --yes vuetify-codemods --files '$GLOB'" /dev/null

Pozor na rozsah. Výchozí vzor pokryje pages, components a layouts. Soubory .vue ale bývají i jinde: v modules, shared, features nebo přímo v kořeni. Spusťte codemod na každou takovou složku.

Třídy, které codemod nechá být

Codemod přejmenuje typografické třídy v šablonách. Vynechá je ale ve třech případech:

  • v blocích <style>,
  • ve jménech tříd skládaných ve skriptu,
  • v souborech, které neumí rozebrat.

Na to stačí krátký skript, který projde soubory sledované gitem:

import pathlib
import re
import subprocess

CLASSES = {
    "text-h1": "text-display-large", "text-h2": "text-display-large", "text-h3": "text-display-medium",
    "text-h4": "text-headline-large", "text-h5": "text-headline-small", "text-h6": "text-title-large",
    "text-subtitle-1": "text-body-large", "text-subtitle-2": "text-title-small",
    "text-body-1": "text-body-large", "text-body-2": "text-body-medium",
    "text-caption": "text-body-small", "text-overline": "text-label-medium",
}
PATTERN = re.compile(r"(?<![\w-])(" + "|".join(sorted(CLASSES, key=len, reverse=True)) + r")(?![\w-])")

files = subprocess.run(["git", "ls-files", "*.vue", "*.css", "*.scss", "*.ts"], capture_output=True, text=True).stdout.split("\n")
for name in filter(None, files):
    path = pathlib.Path(name)
    if not path.exists():
        continue
    before = path.read_text(encoding="utf-8")
    after = PATTERN.sub(lambda match: CLASSES[match.group(1)], before)
    if after != before:
        path.write_text(after, encoding="utf-8")
        print(name)

Mapování není jedna ku jedné. Vuetify 4 přešel na stupnici Material Design 3, takže například text-h1 i text-h2 končí jako text-display-large. Nadpisy si po migraci prohlédněte, velikosti se mírně změní.

Pasti

  • git add -A ve starém repozitáři. Starší projekty nemívají .output a .nuxt v .gitignore. Jednou jsem tak omylem zapsal do gitu celé sestavení. Přidávejte soubory jmenovitě.
  • Sledovaný .env. Než zapíšete lokální nastavení, zkontrolujte git ls-files .env. Jeden z projektů ho měl v gitu.
  • Nasazení bez lokálního prostředí. Jedna aplikace po migraci běžela jen s proměnnou, kterou jsem měl nastavenou lokálně. Bez ní vracela každá stránka chybu 500 a automatické nasazení by shodilo produkci. Před sloučením aplikaci jednou spusťte bez lokálních proměnných.

Kolik to zabere

Samotné Vuetify je u menší aplikace otázka hodiny. Víc času zaberou zastaralé závislosti okolo a ruční kontrola v prohlížeči, kterou žádný codemod nenahradí.

© 2026 Myrha Software