Vue.js - Can't use Blazy

Question

I want to use Blazy package to lazy load images in my Vue.js project. I installed it via npm , but I just can't import it and use it. I put this code in the created method of App.vue :

const bLazy = new Blazy({})

And this code in a component used to display items with images:

<img src="placeholder" :data-src="image-src" class="w-100 rounded" :alt="name">

Now what I tried to import it and make it working:

import Blazy from 'blazy' => Didn't work.

import * as Blazy from 'blazy' => Didn't work.

require('blazy') => "ReferenceError: Blazy is not defined" .

const Blazy = require('blazy') => Didn't work.

What is the right way to make it work?

Answer 1

This is neither a Vue or a npm problem. Blazy is quite an old library (last updated 2 years ago) and doesn't support the module import syntax (because it isn't a module). You have two options:

1. Find a better library for this purpose, at best a plugin for Vue.
2. Copy the package's code to a file in your src and export the Blazy object.