propsDestructure が動かなくなった、その時に・・・

ライブラリがバージョンアップしたら、
深いことは気にせずその場で最新に更新することがモットーなりょうです、こんにちは

さて、今日も毎朝の日課です。

お皿にシリアル、カップに牛乳を入れ、
yarn outdated
を叩きます。
最も大好きなコマンドです。
やっぱり、朝ごはんはお手軽なシリアルと牛乳とyarn outdated に限ります。

『おっ！Nuxtがバージョンアップしてる、バージョン上げよっ』

そんなこんなで気軽にNuxtを3.12.4アップグレードした時に事件は起きました。

『コンポーネントが、何一つまともに動かねぇ・・・』

どうやらコンポーネントに設定しているプロパティの初期値が全くお仕事をしなくなっているようです。

原因

definePropsをすっきり書くために設定していたpropsDestructureの設定が動かなくなってたため。

propsDestructure is 何

propsDestructureは vue3.3 で追加された機能で、
コンポーネントのプロパティの初期値をwithDefaultsを使用せずに指定したりpropsをリアクティブ化させることができる、できるヤツです。

しかし、まだ実験的機能なので、@vitejs/plugin-vueを使用し、
vue + vite の場合は、vite.config.ts
Nuxtの場合は、nuxt.config.ts
に設定が必要です。

Nuxtを入れた場合は、標準でViteだけではなく、この@vitejs/plugin-vueもインストールされているのですが、
最新のNuxtにバージョンアップした際に、
@vitejs/plugin-vueも 合わせて5.0.5から5.1.0 にバージョンアップされ、
この実験的機能の指定方法が変更されてしまい設定が無効になっていました。

ちなみにちゃんとTypeScriptのエラーも表示されます。

対応

Nuxtの場合、@vitejs/plugin-vueの設定もnuxt.config.ts で行うのですが、
ここを@5.1.0以降の指定方法に変更する必要があります。
@vitejs/plugin-vue@5.0.5 以前

  vite: {
    vue: {
      script: {
        propsDestructure: true,
      }
    }    
  },

@vitejs/plugin-vue@5.1.0 以降

  vite: {
    vue: {
      features: {
        propsDestructure: true,
      }
    }    
  },

これでバシッと動くようになりまーす！！