Providers

@katlux/providers is the isomorphic data and caching layer for Katlux applications. It abstracts HTTP communication, client/server state management, and pluggable cache strategies into a unified ADataProvider interface that all data-consuming components accept.

Description

Manage data fetching, pagination, filtering and sorting across flat and tree structures. Choose from four variants per data type: Client-local, Server-local, API-client, and API-server — all sharing the same reactive interface.

Plug-in caching backends with a single option. Available strategies: Memory, Session, LocalStorage, IndexedDB, Cookie, and Application (server-side).

The underlying HTTP engine powering all API-based data providers. Supports deduplication, queuing, cache-key namespacing, and SSR cookie forwarding.

Install the providers package alongside the core toolkit:

Bash

npm install @katlux/providers @katlux/toolkit

Then configure Nuxt to transpile and auto-import from @katlux/providers:

TypeScript

// nuxt.config.ts
export default defineNuxtConfig({
    modules: ['@katlux/toolkit'],
    build: {
        transpile: ['@katlux/providers', '@katlux/toolkit']
    },
    imports: {
        global: true,
        transform: {
            include: [/[\\/]node_modules[\\/]@katlux[\\/]providers/]
        }
    },
    vite: {
        optimizeDeps: { exclude: ['@katlux/providers'] }
    }
})

Import the provider class you need, call setAPIUrl() or setData(), and pass the instance directly to any data-consuming component.

TypeScript

import { CAPIFlatServerDataProvider } from '@katlux/providers/data'
import { ECacheStrategy } from '@katlux/providers'

const provider = new CAPIFlatServerDataProvider({
    pageSize: 20,
    cacheStrategy: ECacheStrategy.Memory,
    cacheLifetime: 60_000
})

await provider.setAPIUrl('/api/v1/users')

Vue

<template lang="pug">
KDatatable(
    :dataProvider="provider"
    :visibleFields="['id', 'name', 'role']"
)
</template>