如何在Vue.js中正确包含已购买主题的脚本

Question

Recently, i bought theme from Themeforest (Keen) and trying to include scripts from theme in Vue.js application, but those scripts throws an errors.

I've tried import those scripts using "import" in App.vue template, tried including scripts through script tag in public.html , tried including scripts in main.js through document.createElement('script') . There was a problem with jQuery, but i fixed that by installing through npm and including in main.js, so Bootstrap's scripts actually working.

There are errors, which scripts throws me:

app.bundle.js:4 Uncaught ReferenceError: KTUtil is not defined
    at app.bundle.js:4
    at app.bundle.js:66

jquery.js?1157:3850 Uncaught TypeError: Cannot read property 'initMediumChart' of undefined
    at mediumCharts (dashboard.js:11)
    at Object.init (dashboard.js:952)
    at HTMLDocument.<anonymous> (dashboard.js:972)
    at mightThrow (jquery.js?1157:3557)
    at process (jquery.js?1157:3625)

fullcalendar.bundle.js:1327 Uncaught TypeError: Cannot read property 'fn' of undefined
    at Object.<anonymous> (fullcalendar.bundle.js:1327)
    at __webpack_require__ (fullcalendar.bundle.js:35)
    at Object.<anonymous> (fullcalendar.bundle.js:4820)
    at __webpack_require__ (fullcalendar.bundle.js:35)
    at Object.<anonymous> (fullcalendar.bundle.js:2045)
    at __webpack_require__ (fullcalendar.bundle.js:35)
    at Object.<anonymous> (fullcalendar.bundle.js:14373)
    at __webpack_require__ (fullcalendar.bundle.js:35)
    at fullcalendar.bundle.js:78
    at fullcalendar.bundle.js:81

Uncaught ReferenceError: PerfectScrollbar is not defined
    at init (scripts.bundle.js:1448)
    at Object.scrollInit (scripts.bundle.js:1462)
    at HTMLDivElement.<anonymous> (scripts.bundle.js:1600)
    at Function.each (jquery.js?1157:367)
    at jQuery.fn.init.each (jquery.js?1157:202)
    at initScroll (scripts.bundle.js:1598)
    at Object.initComponents (scripts.bundle.js:1659)
    at Object.init (scripts.bundle.js:1655)
    at HTMLDocument.<anonymous> (scripts.bundle.js:1820)
    at mightThrow (jquery.js?1157:3557)

main.js:

import Vue from 'vue'
import VueFeather from 'vue-feather'
import App from './App.vue'
import router from './router'
import BootstrapVue from 'bootstrap-vue'

Vue.config.productionTip = true

Vue.use(VueFeather)
Vue.use(BootstrapVue)

var WebFont = require('webfontloader');

WebFont.load({
  google: {
    "families": [
      "Poppins:300,400,500,600,700"]
  },
  active: function () {
    sessionStorage.fonts = true;
  }
});

const jquery = require('jquery')
window.$ = window.jQuery = jquery

var vendors = document.createElement('script');
vendors.setAttribute('src', './assets/vendors/base/vendors.bundle.js');
vendors.setAttribute('type', 'text/javascript');
document.head.appendChild(vendors);

var scripts = document.createElement('script');
scripts.setAttribute('src', './assets/demo/demo4/base/scripts.bundle.js');
vendors.setAttribute('type', 'text/javascript');
document.head.appendChild(scripts);

var calendar = document.createElement('script');
calendar.setAttribute('src', './assets/vendors/custom/fullcalendar/fullcalendar.bundle.js');
vendors.setAttribute('type', 'text/javascript');
document.head.appendChild(calendar);

var dashboard = document.createElement('script');
dashboard.setAttribute('src', './assets/app/custom/general/dashboard.js');
vendors.setAttribute('type', 'text/javascript');
document.head.appendChild(dashboard);

var bundle = document.createElement('script');
bundle.setAttribute('src', './assets/app/bundle/app.bundle.js');
vendors.setAttribute('type', 'text/javascript');
document.head.appendChild(bundle);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

App.vue:

<template>
  <div>
    <!-- begin::Page loader -->
    <!-- end::Page Loader -->
    <!-- begin:: Page -->
    <!-- begin:: Header Mobile -->
    <div id="kt_header_mobile" class="kt-header-mobile " >
        <div class="kt-header-mobile__logo">
            <a href="index.html">
                <img alt="Logo" src="./assets/media/logos/logo-5.png"/>
            </a>
        </div>
        <div class="kt-header-mobile__toolbar">
            <button class="kt-header-mobile__toolbar-toggler" id="kt_header_mobile_toggler"><span></span></button>
            <button class="kt-header-mobile__toolbar-topbar-toggler" id="kt_header_mobile_topbar_toggler"><i class="flaticon-more-1"></i></button>
        </div>
    </div>
    <!-- end:: Header Mobile -->
    <div class="kt-grid kt-grid--hor kt-grid--root">
      <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--ver kt-page">
        <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor kt-wrapper " id="kt_wrapper">
          <Header/>
          <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--ver kt-grid--stretch">
            <div class="kt-container kt-body kt-grid kt-grid--ver" id="kt_body">
              <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
                <Subheader/>
                <div class="kt-content kt-grid__item kt-grid__item--fluid">
                  <router-view/>
                </div>
              </div>
            </div>
          </div>
          <Footer/>
          <OffcanvasPanel/>
          <Quickpanel/>
          <Scrolltop/>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="sass">

</style>

<script>
import "./assets/vendors/custom/fullcalendar/fullcalendar.bundle.css"
import "./assets/vendors/base/vendors.bundle.css"
import "./assets/demo/demo4/base/style.bundle.css"

import Header from './components/Temp/Header.vue'
import Subheader from './components/Temp/Subheader.vue'
import Footer from './components/Temp/Footer.vue'
import OffcanvasPanel from './components/Temp/OffcanvasPanel.vue'
import Quickpanel from './components/Temp/Quickpanel.vue'
import Scrolltop from './components/Temp/Scrolltop.vue'

export default {
  name: "App",
  components: {
    Header,
    Subheader,
    Footer,
    OffcanvasPanel,
    Quickpanel,
    Scrolltop
  }
}
</script>

I expect that all scripts are working and looks like this demo: https://keenthemes.com/keen/preview/demo4/index.html

But actually only jQuery and Bootstrap works. In my mind it's somehow fixable, but i don't know how.

Answer 1

I'm asked on Vue.js forum, they said that i need to try insert scripts before Vue initializing, i tried insert script into head section, errors disappeared, but in functionality no differences. But i "magically" fixed that errors: i inserted scripts tag after closing body tag, and it works. So, if someone has similar errors, try to insert scripts after closing body tag.