@longsightedfilms (Maxim Makarov) posted a new topic, subject "How to properly include scripts from bought Themeforest theme in Vue.js?". It read:

   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 Chrome Inspector console log:
    [code] 
        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)
        
    [/code]
    
    **main.js:**
    [code] 
        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')
        
    [/code]
    
    **App.vue:**
    [code] 
        <template>
          <div>
            <!-- begin8b7c:f320:99b9:690f:4595:cd17:293a:c069Page loader -->
            <!-- en8b7c:f320:99b9:690f:4595:cd17:293a:c069Page Loader -->
            <!-- begin8b7c:f320:99b9:690f:4595:cd17:293a:c069 Page -->
            <!-- begin8b7c:f320:99b9:690f:4595:cd17:293a:c069 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>
            <!-- en8b7c:f320:99b9:690f:4595:cd17:293a:c069 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>
        
    [/code]
    
    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.

To which @JamesThomson (James) replied

    Are you using Vue CLI or your own setup? If you can't install packages via NPM, then it's best to include the scripts in your HTML.
    
    Likely the reason why your inserted scripts don't work properly is because they're loading while the Vue instance is created. Without knowing how and when functions they rely on are being called it's hard to say your exact problem, but I'd start by making sure they all load before anything else and in the correct order. Then take it from there. Btw, you only `setAttribute('type', 'text/javascript')` on vendors, you should set it on all.

To which @longsightedfilms (Maxim Makarov) replied

    I'm using Vue-CLI, however I “magically” fixed that by inserting **script src** tags after closing body tag:
    [code] 
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width,initial-scale=1.0">
            <link rel="icon" href="<%= BASE_URL %>favicon.ico">
            <title>frontend</title>
          </head>
          <body class="kt-page--fixed kt-header--fixed kt-header--minimize-menu kt-subheader--enabled kt-subheader--transparent kt-page--loading">
            <noscript>
              <strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
            </noscript>
            <div id="app"></div>
            <!-- built files will be auto injected -->
          </body>
          <script>
            var KTAppOptions = {
              "colors": {
                "state": {
                  "brand": "#385aeb",
                  "metal": "#c4c5d6",
                  "light": "#ffffff",
                  "accent": "#00c5dc",
                  "primary": "#5867dd",
                  "success": "#34bfa3",
                  "info": "#36a3f7",
                  "warning": "#ffb822",
                  "danger": "#fd3995",
                  "focus": "#9816f4"
                },
                "base": {
                  "label": [
                    "#c5cbe3",
                    "#a1a8c3",
                    "#3d4465",
                    "#3e4466"
                  ],
                  "shape": [
                    "#f0f3ff",
                    "#d9dffa",
                    "#afb4d4",
                    "#646c9a"
                  ]
                }
              }
            };
          </script>
          <script src="./assets/vendors/base/vendors.bundle.js"></script>
          <script src="./assets/demo/demo4/base/scripts.bundle.js"></script>
          <script src="./assets/vendors/custom/fullcalendar/fullcalendar.bundle.js"></script>
          <script src="./assets/app/custom/general/dashboard.js"></script>
          <script src="./assets/app/bundle/app.bundle.js"></script>
        </html>
        
    [/code]
    
    In beginning I insert scripts before closing body tag(as in theme markup), but that didn't work, also tried inserting scripts tag in head section, errors disappeared, but no differences in functionality. Anyway, thanks for helping, if someone else has similar problem, just try to inserting scripts after body tag in **public.html**

To which @JamesThomson (James) replied

    longsightedfilms:
    
    > if someone else has similar problem, just try to inserting scripts after body tag in **public.html**
    
    I wouldn't recommend this. It may work because the browser you're using is forgiving, but other browsers may have issues as this is invalid markup.
    
    Vue CLI uses the `public/index.html` as its template. You can place scripts in there. https://cli.vuejs.org/guide/html-and-static-assets.html#html


{'source': 'discourse', 'url': 'https://forum.vuejs.org/t/how-to-properly-include-scripts-from-bought-themeforest-theme-in-vue-js/61563', 'title': 'How to properly include scripts from bought Themeforest theme in Vue.js?', 'views': 5122, 'has_accepted_answer': False, 'word_count': 1234, 'like_count': 0, 'reply_count': 2, 'participant_count': 2, 'posts': 4, 'tags': 'vue-cli', 'author': '@longsightedfilms (Maxim Makarov)', 'participants': '@longsightedfilms (Maxim Makarov), @JamesThomson (James)', 'image_url': [None], 'created_at': '2019-04-15T21:12:50.073Z', 'last_posted_at': '2019-04-16T22:26:49.775Z'}