Error on npm run dev

[pongoman]

After installing and importing :

import Vue from 'vue' import App from './App' import VueLazyBackgroundImages from 'vue-lazy-background-images'

Vue.component('lazy-background', VueLazyBackgroundImages)

I get the following error

I managed to fix this by changing "main": "main.js" to "main": "VueLazyBackgroundImage.vue" in package.json.

[darrynten]

Are you using vue2?

[pongoman]

Yes, vue-cli project webpack template

[darrynten]

I see.

By the looks of things you're trying to import VueLazyBackgroundImages and it's actually called VueLazyBackgroundImage without the s at the end.

This totally conflicts with the documentation, so very valid, will fix it.

[m2ura]

Okay I am stuck, don't know where to put all things together, i'm new to Vue 2. Do i put this in App.vue? <lazy-background // binding :image-source="backgroundImage" :loading-image="loadingImage" // direct link or path error-image="/img/error.png" image-class="img-responsive" >

[m2ura]

This is my VueLazyBackground.vue file.

[waLplanet]

instead: import VueLazyBackgroundImages from 'vue-lazy-background-images'

use: import VueLazyBackgroundImage from 'vue-lazy-background-images/VueLazyBackgroundImage'

solved for me!

[jackkitley]

Thanks @waLplanet , that worked for me. Strange that it doesnt match the docs @darrynten

[jackkitley]

`import VueLazyBackgroundImage from 'vue-lazy-background-images/VueLazyBackgroundImage'

export default { components: { countdownTimer, VueLazyBackgroundImage },`

[azizullahsaeidi]

Don't use

import VueLazyBackgroundImage from 'vue-lazy-background-images

Instead of that use like this

import VueLazyBackgroundImage from 'vue-lazy-background-images/VueLazyBackgroundImage'