ldc-loue/resources/js/vue.js

import { createApp } from 'vue'

// Register modules
const modules = require.context("./modules", true, /\.js$/i)

document.addEventListener('DOMContentLoaded', () => {

    let setupApp = (app) => {
        if (window.vueDebug) {
            app.config.devtools = true
            app.config.debug = true
        }
        app.config.globalProperties.window = window
        app.config.globalProperties.document = document

        modules.keys().map(key => {
            app.mixin(modules(key).default)
        })
    }

    // Register components
    const vues = require.context("./components", true, /\.vue$/i);
    vues.keys().map(key => {
        let app
        let htmlKey = key.split('/')
            .pop()
            .split('.')[0]
            .replace(/\.?([A-Z])/g, function (x, y) {
                return '-' + y.toLowerCase();
            })
            .replace(/^-/, '')
            .replace('-component', '')

        let el = document.getElementById(htmlKey),
            elGroup = document.getElementsByClassName(htmlKey)
        if (el) {
            app = createApp(
                vues(key).default,
                { json: el.dataset.json ?? {} }
            )
            setupApp(app)
            app.mount(el)
        }
        for (let grpEl of elGroup) {
            // * Hack to prevent loop weirdness
            setTimeout(() => {
                app = createApp(
                    vues(key).default,
                    { json: grpEl.dataset.json ?? {} }
                )
                setupApp(app)
                app.mount(grpEl)
            }, 1000)
        }
    })
})