Formio component can not be resolved in Vue 3

[tm19original]

In Vue 3 the router has the problem to resolve the component:

[Vue Router warn]: Unexpected error when starting the router: Error: Couldn't resolve component "default" at "/incident/report" at eval (vue-router.esm-bundler.js?6c02:1903)

The Report.vue component which fails:

<template>
  <div>
    <formio :form="form"></formio>
  </div>
</template>

<script lang="ts">
import { Form } from 'vue-formio'

export default {
  components: { formio: Form },

  computed: {
    form () {
      return {
        components:[]
      }
    }
  }
}
</script>

<style lang="scss">

</style>

The Router:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/incident',
    name: 'incident',
    component: () => import('../views/Incident.vue'),
    children: [
      {
        name: 'report',
        path: 'report',
        component: () => import('../views/Report.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

When I simply comment out all the form-io stuff everything works fine.

UPDATE

When i only have an vue 3 project without router the following error apperas:

Form.js?a78f:7 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at __extends (Form.js?a78f:7)
    at eval (Form.js?a78f:33)
    at eval (Form.js?a78f:211)
    at Object../node_modules/vue-formio/lib/components/Form.js (chunk-vendors.js:13564)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (index.js?2326:3)
    at Object../node_modules/vue-formio/lib/components/index.js (chunk-vendors.js:13588)
    at __webpack_require__ (app.js:849)

[gabbagnale]

I'm following this issue too, is the resolution scheduled?

[teppa-appnovation]

Hey guys do you know how can I use formio with vue 3? when installing it it gives me this issues

npm install vue-formio --save npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: vue@3.0.7 npm ERR! node_modules/vue npm ERR! peerOptional vue@"^2 || ^3.0.0-0" from @vue/babel-preset-app@4.5.11 npm ERR! node_modules/@vue/babel-preset-app npm ERR! @vue/babel-preset-app@"^4.5.11" from @vue/cli-plugin-babel@4.5.11 npm ERR! node_modules/@vue/cli-plugin-babel npm ERR! dev @vue/cli-plugin-babel@"~4.5.0" from the root project npm ERR! peer vue@"3.0.7" from @vue/compiler-sfc@3.0.7 npm ERR! node_modules/@vue/compiler-sfc npm ERR! peerOptional @vue/compiler-sfc@"^3.0.0-beta.14" from @vue/cli-service@4.5.11 npm ERR! node_modules/@vue/cli-service npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.11 npm ERR! node_modules/@vue/cli-plugin-babel npm ERR! dev @vue/cli-plugin-babel@"~4.5.0" from the root project npm ERR! 4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...) npm ERR! dev @vue/compiler-sfc@"^3.0.0" from the root project npm ERR! 3 more (vue-router, the root project, @types/vue) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@"^2.0.0" from vue-class-component@7.2.6 npm ERR! node_modules/vue-property-decorator/node_modules/vue-class-component npm ERR! vue-class-component@"^7.1.0" from vue-property-decorator@8.5.1 npm ERR! node_modules/vue-property-decorator npm ERR! vue-property-decorator@"^8.2.2" from vue-formio@4.0.7 npm ERR! node_modules/vue-formio npm ERR! vue-formio@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR!

[aminmc]

https://github.com/formio/vue-formio/pull/54 Hopefully should fix vue 3 integration?

[quickskape]

Any update on when this might be resolved. I see that a Vue 3 pr was merged back in March this year. Is v5 release still planned?

[jeriah-formio]

We're currently addressing a backlog of GitHub issues. Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!