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

public function initialize()
{
    $this->BanOnIP = $this->modx->getService('BanOnIP', 'BanOnIP', MODX_BASE_PATH . 'BanOnIP/core/components/banonip/model/');
    #$this->BanOnIP = $this->modx->getService('BanOnIP', 'BanOnIP', MODX_CORE_PATH . 'components/banonip/model/');
    parent::initialize();
}

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

<template>
  <div id="banonip-panel-home-div">
        <!-- предварительно удаляем hello world -->
  </div>
</template>

<script>
export default {
  name: 'banonip-panel-home-div',
  components: {

  }
}
</script>

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import vueModx from 'vuemodx'

import './assets/main.sass'

Vue.config.productionTip = false

window.onload = function() {
	Vue.use(VueAxios, axios)
	Vue.use(vueModx, {
		lexicon: MODx.lang, // Обратите внимание сюда, ниже я подробней опишу этот момент
		appId: 'banonip-panel-home-div'
	});

	Vue.prototype.$httpConfig = {headers: {'modAuth': BanOnIP.modAuth}};

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