Installation
Install the @gp-grid/vue package, import the required stylesheet, and prepare your Vue 3 project to use the high-performance gp-grid component everywhere.
Package Manager
Install @gp-grid/vue using your preferred package manager:
npm install @gp-grid/vueRequirements
- Vue 3.3 or higher
- TypeScript 5.0+ (recommended)
Peer Dependencies
The package has the following peer dependencies:
vue>= 3.3.0
TypeScript
gp-grid is written in TypeScript and includes built-in type definitions:
<script setup lang="ts">
import { Grid, type ColumnDefinition, type GridProps } from "@gp-grid/vue";
</script>Styles
Starting from v0.11.0, gp-grid no longer auto-injects its CSS to avoid FUOC, this gives you the full flexibility of customizing gp-grid styles!. You must import the stylesheet once in your application (e.g. in main.ts or a global CSS file):
import "@gp-grid/vue/dist/styles.css";Or with standard CSS import:
@import "@gp-grid/vue/dist/styles.css";Vite Configuration
No special configuration needed. The package works out of the box with Vite.
Next Steps
- See Basic Usage for your first grid
- Check Nuxt Integration for Nuxt-specific setup