Using fotorama in vue

Question

I am trying to use Fotorama (photo gallery) in my project on vue-cli. jQuery 3.5.1 and Fotorama installed using NPM. Code part:

<script>
    import 'jquery'
    import 'fotorama/fotorama'

    export default {
        // ...
    }
</script>

I get this error:

Uncaught Fotorama requires jQuery 1.8 or later and will not run without it.

How to make it work?

I was doing:

1. Used jquery and fotorama of the same versions without vue. It works
2. Used the cdn version by adding script tags to the mounted hook
3. Put jquery and fotorama in assets folder. Vue shows me errors in jquery file
4. Added script tags in index.html. It works 50/50. I can’t explain this, but this option works randomly when the page reloads.
5. merged jquery and fotorama into 1 file

Sorry, if there are errors in my question, my English bad. I ask this question on the subdomain of my community, but they could not help me. Perhaps there are other libraries that provide such an opportunity. The main thing is that they weigh a little and know how to load pictures when scrolling (not all at once)

Answer 1

I was able to solve this problem.

methods {
    // add script tags to head
    loadFotorama() {
        let script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js';
        document.documentElement.firstChild.appendChild(script);
    },
    loadJquery() {
        let script = document.createElement('script');
        script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
        document.documentElement.firstChild.appendChild(script);
    }
},
created() {
    this.loadJquery()
},
computed: {
    // this property is true when the server sent links to the desired images
    // images are added to the DOM using v-for
    imagesLoaded() {
        return this.$store.getters.getImagesLoaded
    }
},
watch: {
    imagesLoaded(val) {
        if (val) {
            // while fotorama loads from cdn server vue will create img tags using v-for
            this.loadFotorama()
        }
    } 
}

It works fine! Thanks to everyone who tried to help