Nuxtのutilsのモジュールがtemplateタグで認識されなくなった・・・

改版 2024/08/29

投稿時はオートインポートが効いてない現象と思っていたのですが、
実際はutilsの関数がオートインポートされていないのではなく、vue-tsc側での型チェックがvueファイルのtemplateタグで効かなくなっていたようでしたー
また、2024/08/29にリリースされた、vue-tsc@2.1.0にすると解消しているようです

本文

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

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

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

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

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

『あれ？utilsに作った関数が見つからないってエラーが大量に出る・・・』

どうやらutilsに作った関数のオートインポートが全くお仕事をしなくなっているようです。
どうやらutilsに作った関数がtemplateタグで認識しなくなっっているようです。
※前回の記事のコピペ

発生環境

vue@3.4.37
nuxt@3.12.4 (昔のバージョンでも発生するようです)
※nuxtはNuxt4モード
vue-tsc@2.0.29

現象

Nuxt4ではフォルダ構成が変わり、フロント側のソースはappフォルダ配下に作成します。
フロント側で使用するutilsフォルダもプロジェクト直下のフォルダからappフォルダに移動されます。
このappフォルダ配下にあるutilsがオートインポートtemplateタグで認識されなくなった

未検証ですが、同じ環境でもNuxt4モードではない場合は正常に動くかも・・・

対応

vueのバージョンを3.4.36に落とすか、
vue-tscのバージョンを2.1.0にあげると正常に動作しまーす。
まーバージョンを上げる方が良いですよねー

Nuxtのインストールタイミングではvue@3.4.37がインストールされる可能性があるため、
もしutilsフォルダが自動インポートされない認識しない場合は、vueとvue-tscのバージョンの組み合わせを確認してみるといいかもしれませーん！！