wouterflorijn / vue-stack-grid Goto Github PK

Hello! I'm trying to use this awesome package on Vue 3 but I'm not able to make it to work!

Item will overlap when the image loads slowly or failed at first time.
Can it add recycle features like vue-recyclerview?

I noticed when I refresh the page, I can see a horizontal scrollbar. However, if I resize the browser window it goes away and recalculates the grid items correctly again.

I can easily add an overflow-y: hidden to remove but it's not really a solution as the right side items will be cutoff and not fully shown.

I also tried adding:

ref="stacker"

and then a button to call a method:

<b-button @click="reflow">reflow</b-button>

reflow() {
     this.$refs.stacker.reflow()
 }

which does work but adding it to mounted to do it automatically doesn't seem to do anything.

Is there any workaround or fix to remedy this situation?

Hello !
I'm in the case where i need to manually update the grid.
I've quickly check and it doesn't seem that you've implemented the feature yet and it's not listed in the Future plans section.
Could you implement it ?
Thanks a lot 😉

Items stacked on top of each other

Follow #11 @guastallaigor

in plugins/vue-stack-grid.js

import Vue from 'vue'
import { Stack, StackItem } from 'vue-stack-grid'

Vue.component('Stack', Stack)
Vue.component('StackItem', StackItem)

And then, in your nuxt.config.js you import it, and set the mode: 'client'.

plugins: [
    { src: '~/plugins/vue-stack-grid', mode: 'client' }
  ]

testing on index.vue

        <v-flex d-flex>
          <Stack :monitor-images-loaded="true" :column-min-width="320" :gutter-width="8" :gutter-height="8">
            <StackItem v-for="i in 100" :key="i">
              <img src="https://i.imgur.com/0ui5ltX.jpg" />
            </StackItem>
          </Stack>
        </v-flex>

After build:

How can i run this on nuxt app?

Hello, I have a problem, when I reload the page, my cards is on the previous cards. But when I resize my screen, the cards go at the good place.
Thanks

Hi, I recently upgraded my Vue version to 3. How can I use this package with Vue3? Or any alternate package for Vue3?

Do not set the column-min-width, get it automatically, only need to set the number of columns

sometimes I get error " Cannot read property 'clientWidth' of undefined" from stack.vue

Can I use other package replacing vue-images-loaded? I want another package can support SSR ^^

Monitor-image-loaded doesn't work with slots.

    <stack :column-min-width="320" ref="stack" :gutter-width="22" :gutter-height="22" monitor-images-loaded style="transition: transform 300ms" @scroll.native.passive="onUserScrollBottom">
      <stack-item v-for="(item, i) in items" :key="i" style="transition: transform 300ms">
        <slot name="item" :page="page" :item="item" :index="i" />
      </stack-item>
    </stack>

You add a resize listener when the component is mounted. But you're not removing it when the component is destroyed. This causes javascript to fire errors if you unmount the component (i.e. switch sections or something in your app).

The actual error (once the component is destroyed):
Stack.vue?cbef:48 Uncaught TypeError: Cannot read property 'clientWidth' of undefined

Adding this to the component should resolve this issue:
destroyed () { window.removeEventListener('resize', this.reflow) }

Getting this error when using Nuxt.js.

The component is wrapped in a client-only tag to avoid any SSR issues.

<client-only></client-only>

Error screenshot:

Implementation:

In component

<Stack :monitor-images-loaded="true" :column-min-width="320" :gutter-width="8" :gutter-height="8">
        <StackItem v-for="i in 100" :key="i">
                <img src="https://i.imgur.com/0ui5ltX.jpg" />
        </StackItem>
</Stack>

Component registration

import { Stack, StackItem } from 'vue-stack-grid'
export default {
    components: { Stack, StackItem },
}