wp-plugin-init/template/resources/js/bootstrap/app.js

CLI to scaffold a PHP plugin boilerplate structure

import { createApp } from 'vue';
import { createRouter, createWebHashHistory } from 'vue-router';

import App from '@/App.vue';
import { routes } from '@/routes';
import AppConfig from '@/config/AppConfig';

/**
 * Admin SPA entry point.
 *
 * Mounts a single Vue application onto the admin page's container and
 * drives all screens through a hash-based router, so every WordPress
 * submenu shares one bundle and one mount node.
 */
function boot() {
    const el = document.getElementById('__PLUGIN_NAME__-app');

    if (!el) {
        return;
    }

    const router = createRouter({
        history: createWebHashHistory(),
        routes,
    });

    const app = createApp(App);

    app.use(router);

    // Make the localized config available to every component.
    app.provide('appConfig', AppConfig.get());
    app.config.globalProperties.$config = AppConfig;

    app.mount(el);
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', boot);
} else {
    boot();
}