Nuxt / Vue.js in TypeScript: Object literal may only specify known properties, but 'components' does not exist in type 'VueClass'

I see that middleware is a property defined by Nuxt and isn't a standard Vue property.

The error message is a little bit misleading - it looks like it's saying the problem is with the components property, but what it's actually saying is that an object with both {components: ..., middleware: ...} doesn't match any of the expected types.

The solution:

What you need to do is update the definition of the Vue ComponentOptions type to add the middleware property.

To do this, create a new .d.ts file (or edit an existing type file e.g. references.d.ts) and add this declaration to it:

// references.d.ts
/**
 * Extends interfaces in Vue.js
 */

import Vue, { ComponentOptions } from "vue";

declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    // This adds the `middleware` property to the existing `vue/types/options/ComponentOptions` type
    middleware?: string | string[];
  }
}

This is just a variation on how the Vuex plugin adds the store property to the Vue component type. See the vuex/types/vue.d.ts source) for how this is done.