egjs-grid
egjs-grid copied to clipboard
Not working with Nuxt
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:
Reproduction: https://github.com/MickL/egjs-grid-vue-bug
Stackblitz: https://stackblitz.com/~/github.com/MickL/egjs-grid-vue-bug
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>