> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blockli.app/llms.txt
> Use this file to discover all available pages before exploring further.

# BlokkliProvider Vue Component Full Prop Reference Guide

> Full prop reference for the <BlokkliProvider> Vue component. Sets the entity context and editing permissions for a blökkli content area.

`<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

```vue theme={null}
<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

<ParamField body="entity" type="object" required>
  The entity descriptor object. Identifies which backend entity this editing
  context belongs to. All three nested properties are required.

  <Expandable title="entity properties">
    <ParamField body="entity_type" type="string" required>
      The entity type identifier for your backend (e.g., `'node'`,
      `'taxonomy_term'`, `'product'`). Must match the `entityType` values in
      the `FieldConfig` array returned by `getFieldConfig()`.
    </ParamField>

    <ParamField body="entity_bundle" type="string" required>
      The entity bundle identifier (e.g., `'article'`, `'page'`,
      `'landing_page'`). Must match the `entityBundle` values in
      `getFieldConfig()`.
    </ParamField>

    <ParamField body="entity_uuid" type="string" required>
      The unique identifier for this entity instance. blökkli passes this value
      to your adapter via `ctx.state.value.currentEntityUuid` so your adapter
      methods can use it to scope API requests to the correct entity.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="can-edit" type="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.
</ParamField>

<ParamField body="language" type="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.
</ParamField>

## Slots

<ResponseField name="default" type="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()`.
</ResponseField>

## 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
```

<Tip>
  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.
</Tip>

<Warning>
  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.
</Warning>

## Full Example with Multiple Fields

```vue theme={null}
<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>
```

<Note>
  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.
</Note>