I have the component declared by doing the following:

        <v-layout class="display">

          <VirtualGrid :items="mediaItems"
                       :debug="true">

          </VirtualGrid>
        </v-layout>

the display class is defined as:

.album-display {
  overflow: scroll;
  width: 100%;
  height: 100%;
  align-items: stretch;
  align-content: stretch;
  background-color: blue;
}

mediaItems is a computed property and looks like:

    mediaItems()
    {
      let mediaItems = this.items.map( ( item, index ) =>
      {
        return {
          id: `${index}`,
          height: 400,
          width: 400,
          columnSpan: 1,
          renderComponent: MediaItem
        };
      });

      return mediaItems;
    },

this.items is defined to be:

items: [ "[0] - onodit", "[1] - Is", "[2] - whilel", "[3] - Coxise", "[4] - Prods", "[5] - mandmi", "[6] - eciand", "[7] - FIRS", "[8] - ho", "[9] - chabli", "[10] - 1.7%", "[11] - atic", "[12] - oroder", "[13] - he", "[14] - aremy", "[15] - Lost,", "[16] - are", "[17] - sion", "[18] - and", "[19] - Centor", "[20] - hamate", "[21] - e.", "[22] - of", "[23] - abok", "[24] - an", "[25] - used", "[26] - fortio", "[27] - wity", "[28] - Theent", "[29] - inal", "[30] - blonti", "[31] - ionad", "[32] - aned", "[33] - Prics", "[34] - In", "[35] - inal", "[36] - mend", "[37] - moract", "[38] - re", "[39] - ing", "[40] - ge", "[41] - a", "[42] - par", "[43] - frobe", "[44] - hough", "[45] - com", "[46] - eummun", "[47] - ats", "[48] - deritu", "[49] - mic", "[50] - he", "[51] - the", "[52] - dom", "[53] - to", "[54] - comess", "[55] - in", "[56] - (2)", "[57] - the", "[58] - ch", "[59] - this" ],

The MediaItem Component looks like:

<template>

  <div class="item">
    Hello
    {{ item }}
  </div>

</template>

<script>

export default
{
  name: "MediaItem",

  props:
  {
    item: {
      required: true
    },
  },
};
</script>

<style scoped>

.item {
  width: 400px;
  height: 400px;

  background-color: yellowgreen;

  overflow: hidden;
}
</style>

There are two problems:

1. It only renders the first eight items
2. It is not filling the space well...I would expect multiple columns

i am sure I am missing something easy, but I am not sure what that is yet.

It looks like:

Given you have a very large list of elements (10 of thousands), will it destroy those elements that are no longer visible anymore because the user has scrolled over them already? Otherwise I suppose performance will go down, if there are too many objects in the DOM.

Hope the question is clear & Thanks

I thought it was quite interesting reading your source code. You do not rely on IntersectionObserver.

I was wondering what your thought process was creating this component and if you considered APIs like the IntersectionObserver or not, and for what reasons?

Cheers!

This is a pre-step to Vue 3 migration, vuecli is no more supported, hence this PR to migrate to Vite.

This PR may imply breaking changes in the use of the module in some scenarios.

It is likely that loading more content is an async call, so I made it a default.

In case someone wants to do it with a sync function, they should return immediately in their code with Promise.resolve([content]) (depending on their implementation).

Also i used computed data instead of refreshing all values everytime.

Hi does this work with nuxt / ssr? I've got

document is not defined 

Not sure if I implemented the virtual grid in the right way

  return styleElement
}

function addStyle (obj /* StyleObjectPart */) {
  var update, remove
  var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')

  if (styleElement) {
    if (isProduction) {
      // has SSR styles and in production mode.
      // simply do nothing.

First oft all thanks for the lib. I just tried it in the demo page and noticed. That if I rotate my phone, from vertical to horizontal I do not see a single picture I have Seen before. E.g. scrolling to section header 4 and rotating I had to scroll quite a bit to be back at the header.

If it is possible I think it would be nice if the top left picture would stay in the top left field shown when changing the width. For languages which are read from right to legt I think it should be the top right picture which stays stable in the screen.