Unknown custom element

[HugFes]

Hi,

I have an error when I want create a list. I import component in my js :

import   VueVirtualScroller from 'vue-virtual-scroller';
Vue.component('RecycleScroller', VueVirtualScroller.RecycleScroller);

and create my list in template :

<template>
     <RecycleScroller  class="scroller" :items="filteredRows" :item-height="32">
                    <div slot-scope="{ item }">
                     {{item.name }}
                    </div>
   </RecycleScroller>
 </template>

But during the render, I have this error on the console :

Unknown custom element: <recyclescroller> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Can you help me ?

(Sorry I don't speak English very well)

[namotco]

I was able to fix this issue by using lowercase: `Vue.use(VueVirtualScroller); Vue.component('RecycleScroller', VueVirtualScroller.RecycleScroller); Vue.component('recyclescroller', VueVirtualScroller.RecycleScroller); Vue.component('recyclescrolleritem', VueVirtualScroller.RecycleScrollerItem);

Vue.component('DynamicScroller', VueVirtualScroller.DynamicScroller); Vue.component('dynamicscroller', VueVirtualScroller.DynamicScroller); Vue.component('dynamicscrolleritem', VueVirtualScroller.DynamicScrollerItem);`

[MikeSheward]

When i installed this package, through the docs way of installing (using: npm install --save vue-virtual-scroller) it was installing a very outdated version of this, that wasn't related to the most recent docs.

To fix this i used the latest release version (at time of writing v1.0.0-beta.2) and installed it via this way. This solved the issue. npm install --save vue-virtual-scroller@v1.0.0-beta.2

[namotco]

Thanks, this helped, but I still only see the first element

Sent from my iPhone

On Nov 6, 2018, at 7:30 AM, Mike Sheward notifications@github.com wrote:

When i installed this package, through the docs way of installing (using: npm install --save vue-virtual-scroller) it was installing a very outdated version of this, that wasn't related to the most recent docs.

To fix this i used the latest release version (at time of writing v1.0.0-beta.2) and installed it via this way. This solved the issue. npm install --save vue-virtual-scroller@v1.0.0-beta.2

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[BloodSucker123]

Im having the same error. Im using browserify to bundle my code. I also use the suggested version which is vue-virtual-scroller@v1.0.0-beta.2 but still the error persists.

`

{{! test}}

    </recyclescroller>`

JS File that is being bundled with Browserify with the use of babelify `import Vue from 'vue' import VueVirtualScroller from 'vue-virtual-scroller'

var VueResource = require('vue-resource');

Vue.use(VueResource); Vue.use(VueVirtualScroller);

Vue.component('recyclescroller', VueVirtualScroller.RecycleScroller); Vue.component('car-hire',{ props:['rental','position'], template:'#template-car-hire' }) new Vue({ el: '.app-content', data: { rentals:[], searchTitle:'' }, methods: {

},
computed: {
    filtered: function () {
        return this.rentals.filter(rental=>{
            return !this.searchTitle || rental.name.toLowerCase().indexOf(this.searchTitle.toLowerCase()) > -1
        })
    }
},
created: function () {
    let that=this
    console.log('Created')
    that.$http.get('/api/services/car-hire/items')
        .then(response => {
            //- console.log(response)
            that.rentals=response.body
        },response => {

        })
}

})`

What might be the possible cause of this error? It seems like it doesnt find the recyclescroller even though its being defined already.

[SteveEdson]

You need to use <recycle-scroller>. Vue will insert a - in place of the capital letters in a word. It's why it's working for @namotco by lowercasing it all as a workaround.

[Aymkdn]

The way it worked for me:

<template>
  <recycle-scroller …></recycle-scroller>
</template>

<script>
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import { RecycleScroller } from 'vue-virtual-scroller'

export default {
  components:{
    'recycle-scroller': RecycleScroller
  }
}
</script>