PrimeVue 3 to 4 migration

公式のマイグレーションガイド
https://primevue.org/guides/migration/v4/

大きな変更点としては theme.css と primevue/resources が削除されてスタイルテーマの導入方法が大きく変わったこと

あとAPIの削除・移動とかCSSクラスの削除とかあるっぽい

個人開発のアプリで対応が必要になったものをメモっていく

primevue/resources が消えたのでその配下のcssをimportしていた行は削除

- import 'primevue/resources/themes/saga-blue/theme.css';
- import 'primevue/resources/primevue.min.css';

代わりに @primevue/themes からいくつかのテーマを導入できるっぽい

https://primevue.org/theming/styled/#theme

primevue の依存関係に入っているわけではないようなので明示的に依存関係に追加してからドキュメント通りにpreset設定

yarn add @primevue/themes

+ import Aura from '@primevue/themes/aura'

  createApp(App)
-   .use(PrimeVue)
+   .use(PrimeVue, {
+     theme: {
+       preset: Aura,
+     }
+   })

※sagaはなさそう😢なのでauraで代用
※auraのデフォルトだと緑系統いったんそのまま（気が向いたらPrimaryとかをカスタマイズする）

従来 --surface-100 というようになっていたテーマの変数にprefixが付くようになったらしい
デフォルトのprefixは p で --p-surface-100 というような感じ
（Configuration API#OptionsのPrefixの項のあたりから）
https://primevue.org/theming/styled/#options

-   background-color: var(--surface-800);
+   background-color: var(--p-surface-800);

フォントの設定はなくなったっぽい？のでとりあえずv3の実行値をコピペしておく
https://primevue.org/theming/styled/#font

-   font-family: var(--font-family);
+   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

PrimeFlex (v3) のBackground Colorは内部的にPrimeVue (v3) のCSS変数を参照しているのでこれもv4系の変数に変更する必要がある
https://primeflex.org/backgroundcolor
が、PrimeFlexはそもそも開発が終了しておりv4に追従しないので自前でクラスを定義してスタイルを当てておく

  <template>
    ...
-  <div class="surface-800 flex flex-column row-gap-1px p-1px">
+  <div class="bg-surface-800 flex flex-column row-gap-1px p-1px">
    ...
  </template>
  <style scoped>
+ .bg-surface-800 {
+   background-color: var(--p-surface-800);
+ }
  </style>

PrimeFlexはまだ残してあるので混乱しないようクラス名も変えておいた

コンポーネントをリネームする
※まだ互換性がある（リネーム前も存在する）ので必須ではないがこのタイミングでやっておく

Calendar -> DatePicker.
Dropdown -> Select.
InputSwitch -> ToggleSwitch.
OverlayPanel -> Popover.
Sidebar -> Drawer.

単純なリネームではなく他のコンポーネントに寄せる必要があるものも対応しておく

Chips | Use AutoComplete with multiple enabled and typeahead disabled.
TabMenu | Use Tabs without panels.
Steps | Use Stepper without panels.
InlineMessage | Use Message component.
BadgeDirective | Use OverlayBadge instead.
TabView | Use the new Tabs components.
Accordion | Use with the new AccordionHeader and AccordionContent components.

TabMenuはTabsのページを参考にコンポーネント構成を差し替える
https://primevue.org/tabs/#tabmenu

Avatarのアイコンにmdiを指定するとアイコンが中心にこない事象が発生

↓↓↓

piを参考に下記を設定したら直った

.mdi {
  line-height: 1;
}

PrimeFlexからTailwind CSSへの乗り換えをしてみる

Tailwind CSSを導入

まずはTailwind CSSのガイドを参考にインストールしてみる
https://v2.tailwindcss.com/docs/guides/vue-3-vite

• 依存関係追加

  yarn add -D tailwindcss autoprefixer
  

  • postcssはvite経由で入っているのでいらない（気がする）
• 設定ファイル生成

  yarn dlx tailwindcss init -p
  

• ツリーシェイキング設定を追加
  tailwind.config.js

  module.exports = {
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    ...
  }
  

• import部分はそのままなので割愛
  https://v2.tailwindcss.com/docs/guides/vue-3-vite#include-tailwind-in-your-css

Tailwind CSSのクラスが有効か確認

<div class="box-border h-32 w-32 p-4 border-4"></div>

PrimeUIプラグイン追加

この通りでOK
https://primevue.org/tailwind/#plugin

PrimeFlexのCSSを外してプラグインの値（今回はbg-primary）を入れて有効になっているか確認

// import 'primeflex/primeflex.css';

<div class="box-border h-32 w-32 p-4 border-4 bg-primary"></div>

Tailwind CSSのクラス名に差し替え

基本的にはマイグレーション用のコマンドで差し替えてくれる
https://primevue.org/guides/primeflex/#migration

ただし上記ページにある通り一部クラスについては手動での変更が必要

• colを利用してflex: 1を設定していたもの→flex-1に変更

  - class="col"
  + class="flex-1"
  

• grid（内部的にはflex）を利用していた箇所→Tailwind CSSのgridで表現するように書き換え
  PrimeFlexでの記述

  <div class="grid grid-cols-12 gap-4">
    <div class="col-3"></div>  
    <div class="col-3"></div>  
    <div class="col-3"></div>  
    <div class="col-3"></div>  
  </div>
  <div class="grid grid-cols-12 gap-4">
    <div class="col-6"></div>  
    <div class="col-3"></div>  
    <div class="col-3"></div>    
  </div>
  

  Tailwind CSSでの記述

  <div class="grid grid-cols-4 gap-4">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="col-span-2"></div>
    <div></div>
    <div></div>  
  <div>
  

  • gridになったので行ごとに親要素を用意する必要がなくなった
  • 基本サイズは親要素の grid-template-columns から計算されるので設定不要になった

https://v2.tailwindcss.com/docs/grid-column