Using a Vue2 component into a Vite/Vue3 app

Viewed 828

I'm using Vite/Vue3 (TypeScript if that matters), and I'd like to use the following Vue2 component: https://github.com/tylerkrupicka/vue-json-component

After importing it with the following declaration:

import JSONView from 'vue-json-component'

and using it like so:

<JSONView:data="{foo:'bar',toto:'baz'}" root-key="root" class="tree" />

The following error is reported by Vite:

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

node_modules/vue-json-component/dist/index.module.js:2:7:
  2 │ import Vue from 'vue';

My understand is that Vite does not play well with Vue2. I've been trying to find a solution to declare Vue2 components, or "wrap" them to make them work with Vite/Vue3, without success.

I'd like to avoid forking the project if possible to rewrite it for Vue3.

Thanks

1 Answers

In your package.json, add the following:

"dependencies": {
-  "vue": "^2.6.12",
+  "vue": "^3.1.0",
+  "@vue/compat": "^3.1.0"
   ...
},
"devDependencies": {
-  "vue-template-compiler": "^2.6.12"
+  "@vue/compiler-sfc": "^3.1.0"
}
Related