// import Vue from "vue"; // vue2
import { createApp } from 'vue' // vue3
import fabComponent from "./components/Fab.vue";
import SvgIcon from "./components/SvgIcon.vue";

// The body of class
window.fab = {   
    mount(options) {

        var html = '<div data-vue-component="FabComponent"></div>';
        document.body.insertAdjacentHTML('beforeend', html);

        document
            .querySelectorAll("[data-vue-component=FabComponent]")
            .forEach((element) => {

                // works in vue2
                // const floatingButton = new Vue(fabComponent)
                // floatingButton.options(options);
                // floatingButton.$mount(element);

                // what is the equivalent in vue3?
                const app = createApp({});
                app.component('fb',fabComponent);
                const floatingButton = app.use(fabComponent);
                floatingButton.options(options);
                floatingButton.$mount(element);
            });
    }
}

I have been trying to upgrade my vue2 widget to a vue3 one and I’m not that proficient in vue. I have spent 2 long days on this and tried about almost everything I can think of to convert this new Vue(...).

It builds/transpiles without errors, the issue surfaces when I try to load it in my browser. In vue2, floatingButton was assigned as a Proxy(Object), but I just can’t seem to replicate that in vue3, floatingButton is an Object. As a result, floatingButton.options(options); throws an uncaught error.

Any ideas? Thank you.