Installation

Prerequisites

NuGrid requires the following peer dependencies:

• Nuxt 4 or later
• @nuxt/ui v4.0.0 or later
• @vueuse/nuxt v14.0.0 or later

Installation

Install NuGrid using your preferred package manager:

pnpm add @nu-grid/nuxt

npm install @nu-grid/nuxt

yarn add @nu-grid/nuxt

Configuration

Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@vueuse/nuxt',
    '@nu-grid/nuxt'
  ]
})

That's it! The NuGrid component is now globally available in your application.

CSS Setup

Nothing to add. NuGrid registers its styles with Nuxt UI's stylesheet, so as long as your main stylesheet imports Nuxt UI (as Nuxt UI's own setup requires), Tailwind picks up NuGrid's classes and row animations:

@import "tailwindcss";
@import "@nuxt/ui";

This also works when a layer or design system owns the Tailwind entry, since it imports Nuxt UI too.

TypeScript Support

NuGrid is fully typed. Import types from the #nu-grid/types alias:

import type {
  NuGridColumn,
  NuGridRow,
  NuGridEditingOptions,
  NuGridFocusOptions
} from '#nu-grid/types'

Optional Dependencies

Excel Export

For Excel export functionality, install the optional write-excel-file package:

pnpm add write-excel-file

npm install write-excel-file

Module Options

You can configure NuGrid globally in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nu-grid/nuxt'],

  nuGrid: {
    // Default options applied to all grids
  }
})

Verify Installation

Create a simple test component to verify everything is working:

<script setup lang="ts">
const data = ref([
  { id: 1, name: 'Test Item' }
])

const columns = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: 'Name' }
]
</script>

<template>
  <NuGrid :data="data" :columns="columns" />
</template>

If you see a grid with your data, NuGrid is installed correctly!

Next Steps

Now that NuGrid is installed, learn how to use it: