fix(vue-app): add type definition for ComponentOptions.middleware (#4531)

packages/vue-app/types/index.d.ts

@@ -30,6 +30,8 @@ export interface Context {
   beforeNuxtRender(fn: (params: { Components: VueRouter['getMatchedComponents'], nuxtState: NuxtState }) => void): void
 }
 
+export type Middleware = string | ((ctx: Context, cb: Function) => Promise<void> | void)
+
 export interface Transition {
   name?: string;
   mode?: string;

packages/vue-app/types/vue.d.ts

@@ -5,7 +5,7 @@
 import Vue, { ComponentOptions } from "vue";
 import { Route } from "vue-router";
 import { MetaInfo } from "vue-meta";
-import { Context, Transition, LoadingObject } from "./index";
+import { Context, Middleware, Transition, LoadingObject } from "./index";
 
 declare module "vue/types/options" {
   interface ComponentOptions<V extends Vue> {
@@ -14,7 +14,7 @@ declare module "vue/types/options" {
     head?: MetaInfo | (() => MetaInfo);
     key?: string | ((to: Route) => string);
     layout?: string | ((ctx: Context) => string);
-    middleware?: string | string[];
+    middleware?: Middleware | Middleware[];
     scrollToTop?: boolean;
     transition?: string | Transition | ((to: Route, from: Route) => string);
     validate?(ctx: Context): Promise<boolean> | boolean;

test/types/index.ts

@@ -50,8 +50,18 @@ options.layout = (context) => 'foo'
 
 // middleware
 
-options.middleware = 'foo'
+const middlewares: types.Middleware[] = [
-options.middleware = ['foo', 'bar']
+  'foo',
+  (ctx) => {},
+  (ctx, cb) => {},
+  async (ctx) => {},
+  async (ctx, cb) => {} // unlikely
+]
+
+options.middleware = middlewares
+options.middleware = middlewares[0]
+options.middleware = middlewares[1]
+options.middleware = middlewares[2]
 
 // scrollToTop