初学者です。nuxt.jsに認証機能を持たせるためにauthモジュールを導入しています。
nuxt/auth
上記を導入することで使用できるようになる$authやmiddlewareでのログイン状態によるページ制御をコードに記載したところ、
Property 'xxx' does not exist on type 'CombinedVueInstance<Record<never, any> & Vue, object, object, object, Record<never, any>>'.
とVeturのエラーがたくさん出たので対処しました。
環境
- "nuxt": "^2.15.7"
- "vue": "^2.6.14"
- "@nuxtjs/auth": "^4.9.1"
- vetur 0.34.1(vscodeの拡張機能)
対処法
vscodeのveturの拡張機能設定で"vetur.validation.interpolation": falseを設定する。
※コマンドパレットで上記パラメータを検索して設定する、もしくはsettings.jsonに記載する。
エラーの内容
以下参考にさせていただき、Vue.jsにおいて型推論が効かなくなったときに起こるものと理解しました。
対処法の詳細
上記を参考にしました。(ざっと読んだ様子では Template Interpolation Service が関係しているようです。)
The v0.26.1 version is only change for can use template interpolation service when vetur.validation.template: false.
If you no need template interpolation service, please set vetur.experimental.templateInterpolationService: false
v0.26.1バージョンは、vetur.validation.template：falseの場合にのみテンプレート補間サービスを使用できるように変更されています。
テンプレート補間サービスが必要ない場合は、vetur.experimental.templateInterpolationService：falseを設定してください。
今回変更したパラメータ"vetur.validation.interpolation"はvscode内の説明によると
validate interpolations in region using Typescript language service
Typescript言語サービスを使用して領域の補間を検証します
とのこと。
私の環境ではTypeScriptを使用していない、かつTemplate Interpolation Service は何となく無効にしたくないということで、vetur.validation.template: falseを設定しました。
※上記がvetur 0.34.1でも同様の話なのかは分かっていません。Githubのバージョン履歴を追えばわかるのでしょうか。
※エラー自体は出なくなったのですが、私の環境ではテンプレート内の変数にホバーしても変数情報が表示されないので、Template Interpolation Serviceはうまく働いていないように思えます。使いづらく感じるようであれば、別の対応を考えます。
Template Interpolation Serviceとは？
テンプレート内に書かれている式の型チェック、ホバーによる変数情報の表示、補完、定義ジャンプ、参照の表示ができるらしいです。(詳細は以下記事をご参照ください。)