FAQ

Frequently asked questions about @gp-grid/vue.

General

Does gp-grid work with Vue 2?

No, @gp-grid/vue requires Vue 3.3 or higher. Vue 2 is not supported.

Does it work with Nuxt 3?

Yes, gp-grid works great with Nuxt 3. See the Nuxt Integration guide.

Is TypeScript required?

No, but strongly recommended. gp-grid includes built-in TypeScript definitions.

Reactivity

Why isn't my grid updating?

Using shallowRef: You need to replace the entire array:

data.value = [...data.value, newItem];  // Works
data.value.push(newItem);  // Won't trigger update

Using ref: Should work automatically, check console for errors.
Using mutable data source: Make sure to call the mutation methods:
```
dataSource.addRows([newItem]);  // Correct
```

How do I force a refresh?

<script setup>
const key = ref(0);

function refresh() {
  key.value++;
}
</script>

<template>
  <Grid :key="key" ... />
</template>

SSR / Nuxt

Why do I get hydration errors?

gp-grid requires browser APIs. Wrap it in <ClientOnly>:

<template>
  <ClientOnly>
    <Grid ... />
  </ClientOnly>
</template>

How do I show a loading state during SSR?

<template>
  <ClientOnly>
    <Grid ... />
    <template #fallback>
      <div class="h-[500px] animate-pulse bg-gray-200" />
    </template>
  </ClientOnly>
</template>

Styling

How do I enable dark mode?

Use the dark-mode prop:

<template>
  <Grid :dark-mode="isDark" ... />
</template>

For integration with VueUse or Nuxt Color Mode, see the Styling Guide.

How do I override styles in scoped CSS?

Use :deep() for scoped style overrides:

<style scoped>
:deep(.gp-grid-header) {
  background-color: var(--primary);
}
</style>

For complete styling options, see the Styling Guide.

Performance

Is there a row limit?

No practical limit. We've tested with 2 million rows. Performance is constant due to virtual scrolling.

Why is initial render slow?

Generate data outside the component or use useMemo
Use shallowRef for large arrays
Check for expensive custom renderers

FAQ

On this page