@b10cks/next

b10cks SDK

Official JavaScript/TypeScript SDKs for b10cks – a modern headless CMS and content management platform.

This monorepo contains multiple packages that enable seamless integration of b10cks into your web applications.

Packages

@b10cks/client

Framework-agnostic core for the b10cks Data API.

• Type-safe HTTP client
• Shared B10cksDataApi abstraction
• Automatic pagination handling
• Revision and version tracking
• Works in browsers and Node.js

npm install @b10cks/client

@b10cks/vue

Vue 3 integration for b10cks content experiences.

• Vue 3 plugin with global directives
• Data composables built on @b10cks/client
• Editable content directives (v-editable, v-editable-field)
• Reusable component system
• Preview bridge support

npm install @b10cks/vue @b10cks/client

@b10cks/nuxt

Nuxt 4 module for b10cks integration.

• Auto-configured b10cks integration
• Shared composables via @b10cks/vue
• Runtime configuration
• Built on top of @b10cks/vue

npm install @b10cks/nuxt

@b10cks/react

React integration for b10cks with hooks and rendering helpers.

• B10cksProvider context for client/data API
• Typed hooks (useB10cksApi)
• Preview bridge integration

npm install @b10cks/react @b10cks/client

@b10cks/svelte

Svelte integration for b10cks with context, stores, and actions.

• Svelte context setup (createB10cksContext)
• Typed async stores (createB10cksStores)
• editable and editableField actions

npm install @b10cks/svelte @b10cks/client

@b10cks/next

Next.js integration layer for b10cks on top of the React SDK.

• Next-friendly provider (B10cksNextProvider)
• Server helper (createB10cksNextApi)
• Config helper (withB10cks)

npm install @b10cks/next @b10cks/react @b10cks/client

Quick Start

For Nuxt Projects

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@b10cks/nuxt'],
  b10cks: {
    accessToken: 'your-access-token',
    apiUrl: 'https://api.b10cks.com/api',
  },
})

For Vue Projects

import { createApp } from 'vue'
import { B10cksVue } from '@b10cks/vue'

const app = createApp(App)

app.use(B10cksVue, {
  apiClientOptions: {
    token: 'your-access-token',
    baseUrl: 'https://api.b10cks.com/api',
  },
})

app.mount('#app')

For Direct API Access

import { ApiClient } from '@b10cks/client'
import { createB10cksDataApi } from '@b10cks/client'

const client = new ApiClient(
  {
    baseUrl: 'https://api.b10cks.com/api',
    token: 'your-access-token',
    fetchClient: fetch,
  },
  new URL(window.location.href)
)

const dataApi = createB10cksDataApi(client)
const blocks = await dataApi.getBlocks()

Documentation

• b10cks Documentation
• Individual package READMEs:
  • Client Package
  • Vue Package
  • Nuxt Package

Development

Prerequisites

• Node.js 24.7.0 or higher
• pnpm 10.15.1 or higher

Setup

# Install dependencies
pnpm install

# Build all packages
pnpm run build

# Run tests
pnpm run test

# Lint and fix code
pnpm run lint:fix

Project Structure

sdk/
├── packages/
│   ├── client/       # Core API client
│   ├── vue/          # Vue 3 plugin
│   ├── react/        # React SDK
│   ├── svelte/       # Svelte SDK
│   ├── nuxt/         # Nuxt module
│   └── next/         # Next.js integration
├── scripts/          # Build and utility scripts
└── .changeset/       # Changesets for versioning

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines on:

• Setting up your development environment
• Making code changes
• Writing tests
• Submitting pull requests

License

MIT – see LICENSE for details

Support & Community

• Discord: Join our community
• Issues: GitHub Issues

Links

• b10cks Website
• GitHub Repository
• npm Organization

---

Made with in Austria by Coder's Cantina