vue.js

/**
 * The following block of code is used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */
STUDIP.ready(() => {
    document.querySelectorAll('[data-vue-app]:not([data-vue-app-created])').forEach((node) => {
        const config = Object.assign(
            {
                components: [],
                stores: {}
            },
            JSON.parse(node.dataset.vueApp)
        );

        let components = {};
        config.components.forEach(component => {
            const name = component.split('/').reverse()[0];
            components[name] = () => import(`../../../vue/components/${component}.vue`);
        });

        STUDIP.Vue.load().then(async ({createApp, store}) => {
            for (const [index, name] of Object.entries(config.stores)) {
                import(`../../../vue/store/${name}.js`).then(storeConfig => {
                    store.registerModule(index, storeConfig.default);

                    const dataElement = document.getElementById(`vue-store-data-${index}`);
                    if (dataElement) {
                        const data = JSON.parse(dataElement.innerText);
                        Object.keys(data).forEach(command => {
                            store.commit(`${index}/${command}`, data[command]);
                        });

                        dataElement.remove();
                    }
                });

            }
            createApp({
                components,
                store,

                beforeCreate() {
                    STUDIP.Vue.emit('VueAppWillCreate', this);
                },
                created() {
                    STUDIP.Vue.emit('VueAppDidCreate', this);
                },
                beforeMount() {
                    STUDIP.Vue.emit('VueAppWillMount', this);
                },
                mounted() {
                    STUDIP.Vue.emit('VueAppDidMount', this);
                },
                beforeUpdate() {
                    STUDIP.Vue.emit('VueAppWillUpdate', this);
                },
                updated() {
                    STUDIP.Vue.emit('VueAppDidUpdate', this);
                },
                beforeDestroy() {
                    STUDIP.Vue.emit('VueAppWillDestroy', this);
                },
                destroyed() {
                    STUDIP.Vue.emit('VueAppDidDestroy', this);
                },
            }).$mount(node);
        });

        node.dataset.vueAppCreated = 'true';
    });
});