NuxtでTypeScriptを使う方法として、Options API, Composition API, Class API の3つの書き方が公式ページで紹介されています。
今回は Options API を用いることにしました。
環境
- Docker version 20.10.2
- docker-compose version 1.27.4
- node v12.20.1
- yarn 1.22.5
- Nuxt.js v2.14.12
- Visual Studio Code version 1.53.2
- Vetur 0.32.0 (VSCode Extention: Vue tooling for VS Code)
middleware オプションや layout オプションを使おうとすると出るエラー
各ページ内で middleware オプションや layout オプションを使おうとしたところ、
No overload matches this call. と出て、エラーになりました。
解決策
こちらの記事コメントが参考になりました。
Project
├─ api
├─ app // ← Nuxt を使っているディレクトリ
├─ db
├─ nginx
└─ docker-compose.yml
↑ 今回の場合はこのような階層になっており、作業ディレクトリは app です。
そこで、
Project
├─ api
├─ app
├─ db
├─ nginx
├─ docker-compose.yml
└─ vetur.config.js // ← 追加
vetur.config.js を追加し、
vetur.config.js
// vetur.config.js
/** @type {import('vls').VeturConfig} */
module.exports = {
// **optional** default: `[{ root: './' }]`
// support monorepos
projects: ['./app']
}
↑このように記述してVSCodeを再起動すると、
エラーを解消することができました。
- VSCodeの拡張Veturを使っている
- 今回Nuxtを使っている
appディレクトリの他にapidbnginxディレクトリなど複数のワークスペースが存在する
ことが要因でVeturがフォルダを正しく解析できないことが原因だったようです。
型定義ファイル
さらに型定義ファイルを用意すると、VSCodeで予測変換を出すことができます。
こちらの記事を参考にして ComponentOptions の型を上書きしました。
今回は app/types/index.d.ts を用意して以下のような内容にしました。
app/types/index.d.ts
import { Context, Middleware } from '@nuxt/types'
import Vue from 'vue'
declare module 'vue/types/options' {
interface ComponentOptions<V extends Vue> {
layout?: string | ((ctx: Context) => string)
middleware?: Middleware | Middleware[]
}
}
VSCodeを再起動すると、Vue.extend({}) の中で layout middleware オプションも予測変換で出るようになりました。
