CODEWITHSUNDEEP
typescriptvue.jsnuxt.js
user479947
user479947

Reputation:

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

I'm not quite sure why I'm getting this error message when I use a decorator with components and middleware:

enter image description here

Upon inspection, the error reads: TS2345: Argument of type '{ components: { Test: typeof Nav; }; middleware: string[]; }' is not assignable to parameter of type 'VueClass'. Object literal may only specify known properties, but 'components' does not exist in type 'VueClass'. Did you mean to write 'component'?

enter image description here

Without middleware, the @Component decorator no longer fusses:

enter image description here

Any idea why this might be?

Upvotes: 5

Views: 9696

Answers (1)

Sly_cardinal
Sly_cardinal

Reputation: 12993

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.

Upvotes: 10

Related Questions