src/app.js - master - solj/Bitrixvue3jsApplication

src/app.js
99 строк3 KB
AEGabrielyan
Добавлен файл app.js
10 авг 2025, 22:33
10 авг 2025, 22:33e86dac3
import { BitrixVue } from 'ui.vue3';
import { createPinia } from 'ui.vue3.pinia';
import { createRouter, createWebHistory } from "ui.vue3.router";

import { useAppStore } from "./stores/app";
import { useModalStore } from "./stores/modal";
import { useLoaderStore} from "./stores/loader";

import Modal from './components/common/Modal';
import Loader from './components/common/Loader';
import Breadcrumbs from './components/common/Breadcrumbs';

import Home from './components/Home';
import Test from './components/Test';

class App {
    #application;

    constructor(rootNode, options = {}) {
        this.rootNode = document.querySelector(rootNode);
        this.options = options;
    }

    start() {
        this.getTemplate();
    }

    getTemplate() {
        const context = this;

        const routes = [
            {
                path: '/',
                component: Home,
                meta: { breadcrumb: 'Главная' },
            },
            {
                path: '/test/',
                component: Test,
                meta: {breadcrumb: 'Тест'}
            }
        ];

        const sefFolder = context.options.arParams?.SEF_FOLDER;

        if (!sefFolder) {
            alert('Ошибка: в методе createWebHistory не указан SEF_FOLDER раздела');
            throw new Error('SEF_FOLDER is not defined in arParams');
        }

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

        const pinia = createPinia();

        this.#application = BitrixVue.createApp({
            data() {
                return {
                    arResult: context.options.arResult || {},
                    arParams: context.options.arParams || {},
                }
            },

            components: {
                Home,
                Modal,
                Loader,
                Breadcrumbs,
                Test,
            },

            beforeCreate() {
                this.$bitrix.Application.set(context);

                const appStore = useAppStore();
                appStore.setArResult(context.options.arResult);
            },

            template: `
                <div class="container">
                    <Breadcrumbs />
                        <router-view />
                    <Modal />
                    <Loader />    
                </div>                 
            `,

        });

        this.#application.use(router);
        this.#application.use(pinia);
        this.#application.mount(this.rootNode);
    }
}

BX.namespace("BX.devconsult.shmolotilka.myapp");
BX.devconsult.shmolotilka.myapp.App = App;