Skip to main content
<BlokkliProvider> is the root component that establishes the editing context for an entity. Wrap your editable content inside it and pass the entity identifiers and permission flag. Every <BlokkliField> and block component rendered inside it inherits the editing context automatically.

​
Import

<BlokkliProvider> is auto-imported by the blökkli Nuxt module. No manual import is needed.

​
Usage

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

​
Props

​
entity
object
required
The entity descriptor object. Identifies which backend entity this editing context belongs to. All three nested properties are required.
​
can-edit
boolean
required
Controls whether this entity is editable by the current user. When true, appending ?blokkliEditing={entity_uuid} to the page URL activates the editor overlay. When false, the URL parameter is ignored and the editor never activates for this entity — even if the URL parameter is present.Set this to the result of your permission check for the current user and entity.
​
language
string
The BCP 47 language code for the content displayed in this provider (e.g., 'en', 'de', 'fr', 'nl'). Required when you implement the changeLanguage() adapter method or use the translations feature. blökkli uses this value to display the current language in the editor toolbar and to populate the language switcher.

​
Slots

​
default
slot
The page content rendered inside the editing context. Typically contains one or more <BlokkliField> components and any surrounding layout markup. All descendants can access editor state via useBlokkli().

​
Editor Activation

With can-edit set to true, the editor activates when ?blokkliEditing={entity_uuid} appears in the URL. The overlay opens without a full page reload — blökkli intercepts the URL change client-side. 
https://example.com/about?blokkliEditing=a1b2c3d4-e5f6-7890-abcd-ef1234567890
You can add an “Edit page” button to your admin toolbar that appends ?blokkliEditing={uuid} to the current URL. This gives editors a one-click path into the editor without navigating away from the page they are viewing.
Never set can-edit to true for unauthenticated users. Even though the editor UI has its own permission checks, exposing the edit parameter to anonymous users increases your attack surface unnecessarily.

​
Full Example with Multiple Fields

<template>
  <BlokkliProvider
    :entity="{
      entity_type: 'node',
      entity_bundle: 'landing_page',
      entity_uuid: page.uuid,
    }"
    :can-edit="auth.user?.canEditContent ?? false"
    :language="locale"
  >
    <BlokkliField :list="page.header" name="header" tag="header" />

    <main>
      <BlokkliField :list="page.content" name="content" />
    </main>

    <BlokkliField :list="page.footer" name="footer" tag="footer" />
  </BlokkliProvider>
</template>

<script lang="ts" setup>
const { locale } = useI18n()
const auth = useAuth()
const { data: page } = await useFetch(`/api/pages/${route.params.slug}`)
</script>
Each page should contain exactly one <BlokkliProvider> per entity. Nesting multiple providers for the same entity, or rendering two providers for different entities on the same page simultaneously, is not supported.