vue-router doesn't accept components created with createComponent() #185
Closed
Description
I pushed a test case to a new repo here
Steps to reproduce this repo:
- Create a new repo with vue-cli 3. My version was 3.12.1.
- Accept defaults (router, typescript).
yarn add @vue/composition-api
- Edit
Home.vue
to use createComponent() - Typescript starts erroring out during type checking:
Error message:
13 | export default createComponent({
14 | components: {
ERROR in /home/mason/dev/vue-rtc/vue-rtc/src/router.ts
7:27 Argument of type '{ mode: "history"; base: any; routes: ({ path: string; name: string; component: VueProxy<ComponentPropsOptions<Data>, Data>; } | { path: string; name: string; component: () => Promise<...>; })[]; }' is not assignable to parameter of
type 'RouterOptions'.
Types of property 'routes' are incompatible.
Type '({ path: string; name: string; component: VueProxy<ComponentPropsOptions<Data>, Data>; } | { path: string; name: string; component: () => Promise<typeof import("/home/mason/dev/vue-rtc/vue-rtc/src/views/About.vue")>; })[]' is not assignable to t
ype 'RouteConfig[]'.
Type '{ path: string; name: string; component: VueProxy<ComponentPropsOptions<Data>, Data>; } | { path: string; name: string; component: () => Promise<typeof import("/home/mason/dev/vue-rtc/vue-rtc/src/views/About.vue")>; }' is not assignable to typ
e 'RouteConfig'.
Type '{ path: string; name: string; component: VueProxy<ComponentPropsOptions<Data>, Data>; }' is not assignable to type 'RouteConfig'.
Types of property 'component' are incompatible.
Type 'VueProxy<ComponentPropsOptions<Data>, Data>' is not assignable to type 'VueConstructor<Vue> | ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<...>, Record<...>> | AsyncComponentPromise<...> |
AsyncComponentFactory<...> | undefined'.
Type 'ComponentOptions<Vue, { [x: string]: unknown; }, never, never, ComponentPropsOptions<Data>, ExtractPropTypes<ComponentPropsOptions<Data>, false>> & VueConstructorProxy<...>' is missing the following properties from type 'VueConstructor
<Vue>': extend, nextTick, set, delete, and 9 more.
5 | Vue.use(Router);
6 |
> 7 | export default new Router({
| ^
8 | mode: 'history',
9 | base: process.env.BASE_URL,
10 | routes: [
Metadata
Assignees
Labels
No labels