How to write code of components inside component?

[dlintw]

I've a vue file like following, named as 'MainPage.vue', how to convert it into class component?

<script lang='ts'>
import MyForm from '@/components/MyForm'
import MyList from '@/components/MyList'
export default {
  name: 'main-page',
  components: {MyForm, MyList}
}

[ktsn]

Hi, please use the the official forum or community chat to ask usage questions. The issue list of this repo is exclusively for bug reports and feature requests. Thanks!

[dlintw]

I've posted here, nobody reply.
https://forum.vuejs.org/t/how-to-write-code-of-components-inside-component/23458

I'm wondering is this a bug? Or, what's the correct usage? Maybe it should be described on README.md

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import throttle from 'lodash/throttle'

@Component
export default class MainPage extends Vue {
  components = {MyList, MyForm}
}
</script>

[ktsn]

https://github.com/vuejs/vue-class-component/blob/master/README.md#usage

For all other options, pass them to the decorator function.

@Component({
  components: { MyList, MyForm }
})
class MainPage extends Vue {}

[0pt1m1z3r]

@ktsn I get an error

[ts]
Argument of type '{ components: { SwPhoneNumber: Vue; SwSvgIcon: Vue; }; }' is not assignable to parameter of type 'VueClass<Vue>'.
  Object literal may only specify known properties, but 'components' does not exist in type 'VueClass<Vue>'. Did you mean to write 'component'?
(property) ComponentOptions<V, DefaultData<V>, DefaultMethods<V>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>.components: {
    [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, string[] | {
        [x: string]: PropOptions<any> | (() => any) | (new (...args: any[]) => any) | ((() => any) | (new (...args: any[]) => any))[];
    }> | ComponentOptions<never, any, any, any, any, Record<string, any>> | ((resolve: (component: VueConstructor<Vue> | FunctionalComponentOptions<any, string[] | {
        [x: string]: PropOptions<any> | (() => any) | (new (...args: any[]) => any) | ((() => any) | (new (...args: any[]) => any))[];
    }> | ComponentOptions<never, any, any, any, any, Record<string, any>>) => void, reject: (reason?: any) => void) => void | Promise<VueConstructor<Vue> | FunctionalComponentOptions<Record<string, any>, string[] | {
        [x: string]: PropOptions<any> | (() => any) | (new (...args: any[]) => any) | ((() => any) | (new (...args: any[]) => any))[];
    }> | ComponentOptions<never, object | ((this: never) => object), {
        [key: string]: (this: never, ...args: any[]) => any;
    }, {
        [key: string]: any;
    }, Record<string, any>, Record<string, any>> | EsModuleComponent>);
} | undefined

for this code

import SwPhoneNumber from '~/components/SwPhoneNumber/SwPhoneNumber.vue'
import SwSvgIcon from '~/components/SwSvgIcon/SwSvgIcon.vue'

@Component({
  components: {
    SwPhoneNumber,
    SwSvgIcon
  }
})
export default class SwFooter extends Vue {
   ...
}

What am I doing wrong?

[0pt1m1z3r]

@ktsn Sorry, I solved the problem. #123 (comment)