Vue 3 Support

Hello there, are there currently any plans on supporting Vue 3? At the moment there seems to be a problem with the new plugin registration. Adding baklavajs to a brand new Vue 3(-CLI) project like so:

import { createApp } from 'vue'
import App from './App.vue'

import { BaklavaVuePlugin } from "@baklavajs/plugin-renderer-vue";
import "@baklavajs/plugin-renderer-vue/dist/styles.css";

createApp(App)
  .use(BaklavaVuePlugin)
  .mount('#app')

results in a runtime error when calling the app:

index.js?0c30:146 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at extendStatics (index.js?0c30:146)
    at __extends (index.js?0c30:150)
    at eval (index.js?0c30:1428)
    at Object.eval (index.js?0c30:1728)
    at __webpack_require__ (index.js?0c30:30)
    at Object.eval (index.js?0c30:1409)
    at __webpack_require__ (index.js?0c30:30)
    at Object.eval (index.js?0c30:1379)
    at __webpack_require__ (index.js?0c30:30)

[newcat]

Good news: I finally managed to create a version of Baklava v1 for Vue 3. After many failed attempts to do it with the Migration Build, I decided to try it without - and it pretty much worked out of the box.

There are two new packages that support Vue 3:

• @baklavajs/plugin-options-vue3
• @baklavajs/plugin-renderer-vue3

All the other @baklavajs/... packages are compatible with Vue 3, so there are no separate packages for them.

How to get started

1. Unfortunately, using the bundled baklavajs package is not possible for Vue 3 at the moment. To install Baklava, you need to install the packages separately. For example npm install @baklavajs/core @baklavajs/plugin-options-vue3 @baklavajs/plugin-renderer-vue3
2. Register the Vue plugin inside your main.js or main.ts (make sure to not forget the 3 at the end of the package name):

import { createApp } from "vue";
import App from "./App.vue";

import { BaklavaVuePlugin } from "@baklavajs/plugin-renderer-vue3";
import "@baklavajs/plugin-renderer-vue3/dist/styles.css";

createApp(App).use(BaklavaVuePlugin).mount("#app");

1. Now you should be able to use everything like in Vue 2.

Known Issues

• The @baklavajs/plugin-renderer-vue3 package currently has a dependency on @baklavajs/events@1.9.2, which doesn’t exist. When installing using Yarn, you can select the correct version 1.8.2. I haven’t tested it with npm.

I have tested the basic functionality, but I couldn’t test it as much as I did for Vue 2, since all my projects using Baklava are based on Vue 2. So I just tested using the playground.

Please try the new packages in your Vue 3 projects and report any bugs in this issue.

[newcat]

Hi Felix, the Vue 3 rework is actually in progress and will be released with Baklava V2. However, as Baklava V2 is basically a complete rewrite of the project, it still takes some time. In the meantime I will have a look if I can release a Vue 3 compatible version of Baklava V1 using the new Vue Migration Build.