Install and Set Up blökkli in Your Nuxt 3 Application

export default defineNuxtConfig({
  modules: ['@blokkli/editor'],
  blokkli: {
    itemEntityType: 'block',
  },
})

import { defineBlokkliEditAdapter } from '#blokkli/adapter'

export default defineBlokkliEditAdapter((ctx) => {
  return {
    async loadState() {
      // Return initial block state from your backend.
      // ctx gives you access to the current entity context.
      return { /* ... */ }
    },

    async mapState(state) {
      // Transform raw backend state into blökkli's internal format.
      return state
    },

    async getAllBundles() {
      // Return the list of block type definitions available to editors.
      // Each entry describes a bundle: its name, label, and field config.
      return []
    },

    async getFieldConfig() {
      // Return field-level configuration for the current entity.
      return []
    },

    async addNewBlock(options) {
      // Persist a newly added block to your backend.
      // options includes the bundle, field name, and insertion index.
    },

    async moveBlock(options) {
      // Update your backend when an editor moves a single block.
    },

    async moveMultipleBlocks(options) {
      // Update your backend when an editor moves several blocks at once.
    },
  }
})

<template>
  <BlokkliProvider
    :entity="{
      entity_type: 'node',
      entity_bundle: 'page',
      entity_uuid: page.uuid,
    }"
    :can-edit="true"
  >
    <BlokkliField :list="page.blocks" name="blocks" />
  </BlokkliProvider>
</template>

<template>
  <div class="text-block">
    <p>{{ options.text }}</p>
  </div>
</template>

<script lang="ts" setup>
const { options } = defineBlokkli({
  bundle: 'text',
  options: {
    text: {
      type: 'text',
      label: 'Text content',
      default: '',
    },
  },
})
</script>