Framework wrappers

Each wrapper is a thin, typed adapter over the <nlq-data> element and @nlqdb/sdk — it adds your framework’s component and typing idiom and nothing else (no second network layer, SK-FW-001). Install the one for your framework; the full runnable walkthrough lives in each tutorial.

Not on npm yet

The wrapper packages are built and tested on main but not yet published to npm — the npm i @nlqdb/… commands below will work once they publish. Until then, use the universal <nlq-data> element straight from the CDN (https://elements.nlqdb.com/v1.js, no install — see the HTML tutorial): the wrappers add typing and idiom, not capability.

Conventions

Every wrapper exports the same two components — <NlqData> (read) and <NlqAction> (write, with a preview → Apply diff). What differs per framework is how event callbacks are named and where the server-only SDK factory lives:

Framework	Package	Event-callback props	Server entry
React	@nlqdb/react	onLoad / onError / onSuccess / onConfirmRequired	—
Next.js	@nlqdb/next	(React props)	@nlqdb/next/server, @nlqdb/next/script
Vue	@nlqdb/vue	@load / @error / @success / @confirm-required	—
Nuxt	@nlqdb/nuxt	(Vue props) + useNlq() composable	—
Svelte	@nlqdb/svelte	onload / onerror / onsuccess / onconfirmRequired	—
SvelteKit	@nlqdb/sveltekit	(Svelte props) + <NlqHead>	@nlqdb/sveltekit/server
Astro	@nlqdb/astro	underlying nlq-data:* CustomEvents (via client:*)	—
Solid	@nlqdb/solid	onLoad / onError / onSuccess / onConfirmRequired	—

Server entries exist where a framework can statically separate server-only modules (SK-FW-003): the sk_live_*-keyed SDK factory ships only from those sub-paths, so it never reaches a browser bundle. Every wrapper registers the element lazily on mount, so server-side rendering stays inert (SK-FW-002).

React

npm i @nlqdb/react

import { NlqData } from "@nlqdb/react";

<NlqData goal="today's orders, newest first" db="orders" apiKey={process.env.NEXT_PUBLIC_NLQDB_KEY} />;

Full walkthrough → React tutorial.

Next.js

npm i @nlqdb/next

@nlqdb/next/script injects the elements bundle; @nlqdb/next/server is the import "server-only" SDK factory for Route Handlers. Full walkthrough → Next.js tutorial.

Vue

npm i @nlqdb/vue

<script setup lang="ts">
import { NlqData } from "@nlqdb/vue";
</script>

<template>
  <NlqData goal="today's orders, newest first" db="orders" api-key="pk_live_..." />
</template>

Full walkthrough → Vue tutorial.

Nuxt

npm i @nlqdb/nuxt

Add @nlqdb/nuxt to modules — it auto-registers <NlqData> / <NlqAction> and the useNlq() composable over Nuxt’s useFetch. Full walkthrough → Nuxt tutorial.

Svelte

npm i @nlqdb/svelte

Full walkthrough → Svelte tutorial.

SvelteKit

npm i @nlqdb/sveltekit

<NlqHead> loads the elements CDN bundle; @nlqdb/sveltekit/server carries the load() helper for server-side fetches. Full walkthrough → SvelteKit tutorial.

Astro

npm i @nlqdb/astro

Add the integration to astro.config.mjs; it injects the elements bundle and ships a typed <NlqData> component. Full walkthrough → Astro tutorial.

Solid

npm i @nlqdb/solid

Uses Solid’s native attr: / on: namespaces. Full walkthrough → Solid tutorial.