[Vuejs]-JavaScript packages not found/loaded when navigating using vue-router

by

1👍

✅

I found the answer!

The solution was to add the library as a <src> tag after the component has mounted:

MainTemplate.vue

import "../js/vendors.min.js"
import "../assets/icons/feather-icons/feather.min.js"
import "../assets/vendor_components/apexcharts-bundle/dist/apexcharts.js"
import "../js/demo.js"
import "../js/jquery.smartmenus.js"
import "../js/menus.js"
import "../js/template.js"

export default {
name: "MainTemplate",
methods: {
    loadLibrary(libraryPath) {
        let newScript = document.createElement('script')
        newScript.setAttribute('src', libraryPath)
        document.head.appendChild(newScript)
    }
},
mounted() {
    if (this.$options.name === 'MainTemplate') {
        this.loadLibrary("/src/js/vendors.min.js")
        this.loadLibrary("/src/assets/icons/feather-icons/feather.min.js")
        this.loadLibrary("/src/assets/vendor_components/apexcharts-bundle/dist/apexcharts.js")
        this.loadLibrary("/src/js/demo.js")
        this.loadLibrary("/src/js/jquery.smartmenus.js")
        this.loadLibrary("/src/js/menus.js")
        this.loadLibrary("/src/js/template.js")
    }
}
}

I chose to put this code in my MainTemplate (because my other components extend from it) rather than use it in each one.

I also kept my original import statements so that they run the first time the site is loaded.

👤basilh

Leave a comment