Extend Component options

[John0x]

Hey, I am trying to use the vue-class-component together with nuxt.js.

The problem is, that in a lot of cases I need to give the component an extra option for the layout.
For js, this is how it works:

<template>
  <div>
    <p>Hi from {{ name }}</p>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>

<script>
export default {
  layout: 'dark',
  asyncData ({ req }) {
    return {
      name: req ? 'server' : 'client'
    }
  }
}
</script>

But how can I do this with the class-component?
My current approach:

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component({
  layout: 'admin'
})
export default class AdminPage extends Vue {
}
</script>

But I get the following error:

(12,3): error TS2345: Argument of type '{ layout: string; }' is not assignable to parameter of type 'VueClass'.
  Object literal may only specify known properties, and 'layout' does not exist in type 'VueClass'.

[ktsn]

If you are using TypeScript, just augment the ComponentOptions type.

declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    layout?: string;
  }
}

See https://github.com/vuejs/vue/blob/dev/types/test/augmentation-test.ts

[chanlito]

@ktsn this solution doesn't work on 2.6. I had to downgrade to 2.4.

[archseer]

It seems it doesn't work on new versions. @ktsn any ideas? I'm using the latest typescript version (2.8) and with this:

@Component({
  mixins: [validationMixin],
  components: {
    ...
  },
  validations: {
    model: {
      name: { required },
    },
  }
})

// vuelidate.d.ts
declare module 'vuelidate' {
  // we need to augment the actual Vue types
  import vue from 'vue'

  // must bolt on the validations property to the input of ComponentOptions
  // and also onto the "output" of @Component in the form of VueClass<Vue>
  module 'vue/types/options' {
    interface ComponentOptions<V extends vue> {
      validations?: { [x: string]: any }
    }
    interface VueClass<V extends vue> {
      validations?: { [x: string]: any }
    }
  }

An error will be generated, like this:

Argument of type '{ mixins: { data: () => { [x: string]: any; }; beforeCreate: () => void; beforeDestroy: () => voi...' is not assignable to parameter of type 'VueClass<Vue>'.  Object literal m
ay only specify known properties, but 'mixins' does not exist in type 'VueClass<Vue>'. Did you mean to write 'mixin'? [Error]

It always complains about the first key in the object, but validations is the one that causes the error. Removing it fixes the error

[grofit]

I see this error too in latest version, any ideas on how to fix it?

[ArtemKha]

Try to install:

npm i @types/vuelidate --save-dev

also you could try to delete node_modules dir and .lock file and ran npm install

[spapaseit]

@archseer, What solved it for me is installing typings for vuelidate (npm install -D @types/vuelidate),
and in the Vue component adding: import { validationMixin } from 'vuelidate';

[emarbo]

The original solution from @ktsn works well but you must import Vue first, otherwise you aren't augmenting the original ComponentOptions interface.

This is the content of my types/vue.d.ts to expand the ComponentOptions with the watchParam property:

import Vue from 'vue';

declare module '*.vue' {
  export default Vue;
}

declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    watchParam?: boolean;
  }
}

I had to use this approach because this parameter isn't included in the @nuxt/types. If it isn't your case, including the @nuxt/types in the tsconfig.json should be enough.