generator-upendodnn/generators/spa/templates/Vue3JS/common/client-app/src/main.js

Scaffolds DNN extensions, including Modules (Webforms, SPA, and MVC), Persona Bar, Skin Object, Library, Scheduler, and Hotcakes Commerce projects (based on the generator built by Matt Rutledge).

import { createApp } from 'vue'
import App from './App.vue'
import { getResx, antiForgeryToken } from "./assets/api";
import router from './router';
import store from './store/index';

const allAppElements = document.getElementsByClassName("appModule");
const app = createApp(App);
app.use(router)
app.use(store)

app.config.devtools = true;

function getResxPromise(dnnConfig, resxKey) {
    return new Promise((resolve) => {
        getResx(dnnConfig, resxKey, resolve);
    });
}

document.addEventListener("DOMContentLoaded", function setApp() {
    for (var i = 0; i < allAppElements.length; i++) {
        const thisAppElm = allAppElements[i];
        const dnnConfig = {
            tabId: Number(thisAppElm.getAttribute("data-tabid")),
            moduleId: Number(thisAppElm.getAttribute("data-moduleid")),
            editMode: thisAppElm.getAttribute("data-editmode").toLowerCase() === "true",
            apiBaseUrl: thisAppElm.getAttribute("data-apibaseurl"),
            rvt: antiForgeryToken()
        };

        if (window.dtCallBacks === undefined) {
            window.dtCallBacks = [];
        }

        getResxPromise(dnnConfig, "View")
            .then(resx => {
                app.provide("dnnConfig", dnnConfig);
                app.provide("resx", resx);
                app.provide("window", window);
                app.provide("jQuery", window.$);
                app.mount(`#${thisAppElm.id}`);
            })
            .catch(error => { console.log(error); });
    }
});