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

The error you get indicates that jQuery might be outdated (it shouldn't happen when downloading via npm though).

You can definitely try to update the package using: npm update jquery

Second issue might be the way you import jquery in vue component.

Try this: import $ from 'jquery';

You also briefly mentioned that you need a library which weighs a little and loads pictures when scrolling. I would suggest trying Macy.js . It is only 4kb so it's much smaller than jQuery itself.

Answer 2

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