@litable/nuxt

Nuxt 3 module for @litable/core.

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 — no explicit import needed.

<template>
  <LiTable
    :ajax="apiUrl"
    :server-side="true"
    :columns="columns"
    :sticky-header="[0, 1]"
    :pagination="{ pageSize: 20 }"
    :sorting="true"
    :filtering="true"
    :theme="theme"
    @page-change="handlePage"
    @sort="handleSort"
  />
</template>

<script setup lang="ts">
import type { ColumnDef, ThemeOptions } from '@litable/nuxt';

const apiUrl = 'https://api.example.com/data?school=1811';

const columns: ColumnDef[] = [
  { key: 0,  pinLeft:  true },
  { key: 1,  pinLeft:  true, render: (val) => `<b style="color:red;">${val}</b>` },
  { key: -1, pinRight: true },
  { key: -2, pinRight: true },
];

const theme: ThemeOptions = {
  striped: true,
  border: { borderWidth: 1, columnBorder: true, rowBorder: true, borderColor: 'gray' },
};

const handlePage = (page: number, pageSize: number) => console.log(page, pageSize);
const handleSort = (col: string, dir: 'asc' | 'desc') => console.log(col, dir);
</script>

Inline data

<template>
  <LiTable
    :data="rows"
    :columns="[
      { key: 'name', header: 'Full Name', pinLeft: true },
      { key: 'city', render: (val) => `<em>${val}</em>` },
    ]"
    :pagination="{ pageSize: 10, pageSizes: [5, 10, 25, 'All'] }"
    :export="{ formats: ['csv', 'excel'], filename: 'users' }"
    sorting
    filtering
  />
</template>

<script setup lang="ts">
const rows = ref([
  { name: 'Alice', city: 'New York' },
  { name: 'Bob',   city: 'London'   },
]);
</script>

How it works

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

TypeScript

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

See @litable/core for the full options reference.

License

Copyright © 2026 Naveen Yadav. All rights reserved.
Proprietary and confidential — see LICENSE.