@litable/nuxt

Nuxt 3 module for LiTable.

Install

npm install @litable/nuxt @litable/core

Setup

Add the module to nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@litable/nuxt'],
});

Usage

The <LiTable> component is auto-imported globally:

<template>
  <LiTable
    :data="rows"
    :columns="columns"
    :pagination="{ enabled: true, pageSize: 20 }"
    :sorting="true"
    :filtering="true"
  />
</template>

<script setup lang="ts">
const rows = ref([...]);
const columns = [{ field: 'name', title: 'Name', sortable: true }];
</script>

How it works

• The component is wrapped in <ClientOnly> — LiTable is a DOM library and cannot render on the server.
• @litable/core is loaded via dynamic import() inside onMounted, so it never hits the SSR bundle.
• A deep watch on all props calls .update() on change.

TypeScript

import type { LiTableOptions, ColumnDef } from '@litable/nuxt';