Экскурс как можно использовать vuejs в место extjs и не запариться.

1. Ставим modExtra от товарища Василия, производим необходимые настройки и запускаем билд domain.name/componentName/_build/build.php.
2. Затем удаляем все наши extjs активы по адресу domain.name/componentName/assets/components/componentname/js/mgr. В ней у нас будет наш app.js
3. Ставим vue cli 3 командой npm install -g @vue/cli или yarn global add @vue/cli от наших китайских товарищей.

1. Запустив в папке с проектом терминал и следуя этой инструкции выполнить команду которая похожа на что-то подобное vue-cli-service build --mode development --dest assets/components/componentsname/js/mgr/dist --watch.
2. Либо вместо всего этого написать vue ui и сделать все кнопочно-тыкачно. Честно говоря мне очень зашел интерфейс и я именно в таком режиме в последнее время работаю.

• режим среды => development
• результирующая директория => assets/components/componentsname/js/mgr/dist
• делаем активным поле “следить за изменениями”
• сохраняем и нажимает запустить

public function loadCustomCssJs()
    {
        $this->addCss(MODX_BASE_PATH . .'componentName/assets/components/componentname/css/mgr/main.css');
        $this->addJavascript(MODX_BASE_PATH . .'componentName/assets/components/componentname/js/mgr/dist/app.js');
        //---
        $this->addHtml('<script type="text/javascript">
            var componentName= {
                connector_url: "' . $this->componentName->config['connectorUrl'] . '",
                modAuth: "' . $this->modx->user->getUserToken($this->modx->context->get('key')) . '",
                lang: ' . json_encode($this->modx->lexicon->fetch()) . '
            };
        </script>');
    }

import axios from 'axios'
import VueAxios from 'vue-axios'
import vueModx from 'vuemodx'

//засовываем вызов vue в window.onload чтоб дождаться пока отрисуется наш div
window.onload = function() {
    Vue.use(VueAxios, axios)
    Vue.use(vueModx, {
        lexicon: componentName.lang, // передаем наш словарик
        appId: 'awesome-panel-home-div' //id  div`a в котором отрисовывается наш компонент, он будет следить за его высотой и при необходимости добавлять  скролл
    })

    Vue.prototype.$httpConfig = {headers: {'modAuth': componentName.modAuth}}; // кидаем modAuth в заголовок axios

    new Vue({
        render: h => h(App),
    }).$mount('#awesome-panel-home-div');
};