egjs-grid icon indicating copy to clipboard operation
egjs-grid copied to clipboard

Not working with Nuxt

Open MickL opened this issue 8 months ago • 1 comments

Is it working with Vue 3? The example code seems very oldish and is hard to find. There is a npm package but no github repo / docs / readme? The example in the npm repo doesnt use setup function composition API. I tried:

<script setup lang="ts">
import {
  MasonryGrid,
  JustifiedGrid,
  FrameGrid,
  PackingGrid,
} from '@egjs/vue-grid';
</script>

<template>
  <masonry-grid>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </masonry-grid>
</template>

But I get multiple warnings and errors: Image

Reproduction: https://github.com/MickL/egjs-grid-vue-bug

Stackblitz: https://stackblitz.com/~/github.com/MickL/egjs-grid-vue-bug

MickL avatar Apr 10 '25 13:04 MickL

As a workaround I use @egjs/grid directly, instead of @egjs/vue-grid:

<script setup lang="ts">
import { FrameGrid } from '@egjs/grid';

const containerRef = ref();

onMounted(() => {
  const grid = new FrameGrid(containerRef.value, {
    gap: 5,
    frame: [
      [1, 1, 2, 2],
      [1, 1, 3, 3],
    ],
  });

  grid.renderItems();
});
</script>

<template>
   <div ref="containerRef"></div>
</template>

MickL avatar May 21 '25 15:05 MickL