Installation

Prerequisites

NuGrid requires the following peer dependencies:

• Nuxt 4 or later
• @nuxt/ui v4.0.0 or later
• @vueuse/nuxt v13.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

NuGrid requires its CSS to be imported in your application's main stylesheet. This ensures Tailwind scans the component classes for proper theming and focus styling.

Add the following to your main.css (or equivalent):

@import "tailwindcss";
@import "@nuxt/ui";
@import "@nu-grid/nuxt/css";

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: