Skip to main content
You configure blökkli inside the blokkli key in your nuxt.config.ts file. After adding '@blokkli/editor' to your modules array, every option you set under blokkli controls how the editor registers itself, identifies your block entities, and exposes shared configuration across your project.

​
Basic Setup

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@blokkli/editor'],
  blokkli: {
    itemEntityType: 'block',
    globalOptions: {},
  },
})
The blökkli Nuxt module requires Nuxt 3.x. It is not compatible with Nuxt 2 or the Nuxt Bridge layer.

​
Module Options

​
itemEntityType
string
required
The entity type string that identifies your block items internally. blökkli uses this value when constructing references to block entities and communicating with your adapter.
blokkli: {
  itemEntityType: 'block', // or 'paragraph', 'component', etc.
}
Common values are 'block' (the default convention) or 'paragraph' when integrating with CMS platforms that use paragraph-based content models. The string you provide here must match what your adapter returns for block entity types.
​
globalOptions
object
An object that defines reusable options shared across all block types in your project. Each key is the option name you reference from individual blocks; each value is an option definition object using the same shape as block-level options defined in defineBlokkli().
blokkli: {
  globalOptions: {
    spacing: {
      type: 'radios',
      label: 'Spacing',
      default: 'normal',
      options: {
        compact: 'Compact',
        normal: 'Normal',
        wide: 'Wide',
      },
    },
  },
}
Once defined here, any block can opt in to a global option by listing its key in the globalOptions array inside defineBlokkli(). See the Global Options page for full details on option types and usage patterns.

​
Auto-Imports

The blökkli Nuxt module automatically registers the following so you never need to import them manually in your components or adapter file:
  • defineBlokkli — the composable you call inside every block component to declare its bundle, options, and slots
  • <BlokkliProvider> — the root wrapper component that initialises the blökkli runtime
  • <BlokkliField> — the field component that renders a list of blocks and enables drag-and-drop editing
  • #blokkli/adapter — the virtual module you import inside app/blokkli.editAdapter.ts to get the defineBlokkliEditAdapter factory
All four are available globally the moment you add '@blokkli/editor' to your modules array.