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, Application (server-side), or register your own custom cache strategy.

📖 View Custom Cache Strategy Guide

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

📖 View RequestProvider Documentation

Persistent PWA offline mutation queue supporting IndexedDB, LocalStorage, and Memory backends with FIFO flushing and dead-letter error handling.

📖 View RequestQueue Documentation

Framework-agnostic tag registry mapping providers to resource tags. Automatically refreshes GET data upon mutation completion.

📖 View Registry & Composables Documentation

Zero-dependency, hardware-accelerated AES-256-GCM client-side encryption pipeline. Protects sensitive data (PII, financial records, GDPR-regulated fields) by encrypting payloads before transmission and decrypting transparently on the client. Features an SSR security guard (decryptOnSSR: false) that prevents plaintext from ever entering server memory or SSR transfer payloads.

📖 View Encryption & SSR Security Guide

🔒 CWebCryptoEncryptionProvider Class

🏛️ AEncryptionProvider Base Class

📋 IProviderEncryptionOptions Interface

🔌 IEncryptionProvider Interface

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'
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>