環境

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 ディレクトリの他に api db nginx ディレクトリなど複数のワークスペースが存在する

ことが要因で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 オプションも予測変換で出るようになりました。