---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren"
locale: de
meta:
  "og:title": "Academy Article"
---

[Zur Startseite](https://academy.laioutr.com/)

- [Für Entwickler](https://academy.laioutr.com/bereiche/fuer-entwickler)

- [Einstieg für Entwickler](https://academy.laioutr.com/leitfaeden/einstieg-fuer-entwickler)

- [Eigene Sections und Blocks für Studio definieren](https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren)

# Eigene Sections und Blocks für Studio definieren

Jede Section und jeder Block ist eine Vue-Datei mit einer exportierten definition, erstellt mit defineSection oder defineBlock. Die definition legt Komponentenname, Studio-Metadaten, Felder und Slots fest, und Studio baut daraus Auswahl und Seitenleiste.

## Bevor du startest

<dl>

<dt>Tarif</dt>
<dd>Jeder Plan, auch Starter</dd>

<dt>Rolle</dt>
<dd>Entwickler mit Zugriff auf das App-Repository</dd>

<dt>Dauer</dt>
<dd>15 Min.</dd></dl>

### Voraussetzungen

- Eigene App auf Basis des App Starters
- Laufender Playground mit Studio-Verbindung

Zuletzt geprüft am 15. Oktober 2026

Sections sind die großen Seitenbereiche wie Hero oder Produktraster, Blocks die kleineren Einheiten in deren Slots, etwa eine Produktkarte oder ein FAQ-Eintrag. Beide bestehen aus einer Vue-Komponente und einer **definition** in derselben Datei.

Die Plattform liest die definition an drei Stellen: **Studio** baut daraus Picker und Seitenleiste, **Frontend Core** verdrahtet Daten und Props, und die Vue-Komponente leitet mit `definitionToProps` ihre Props ab. Pflicht sind `component` (gleich dem Dateinamen, mit Präfix Section oder Block), `studio.label` und bei Sections `slots`.

Das `schema` gruppiert Felder in Fieldsets, die Studio als aufklappbare Bereiche zeigt. Slots steuern mit `restrictTo`, `allow` und `prefer`, welche Blocks erlaubt sind. Ein optionales `ai`-Feld liefert Fakten für Agenten, die Seiten über den Laioutr MCP zusammenstellen; im Normalfall bleibt es leer.

## Schritt für Schritt

1. 1 ### Schritt 1: Datei anlegen

   Unter `src/runtime/app/sections/` eine Datei wie `SectionHeroBanner.vue` anlegen, Blocks unter `src/runtime/app/blocks/`. Der Dateiname ist zugleich der Komponentenname.
2. 2 ### Schritt 2: Definition exportieren

   In einem normalen `<script lang="ts">`-Block `export const definition = defineSection({ ... })` mit `component`, `studio` (mindestens `label`), `slots` und `schema` anlegen.
3. 3 ### Schritt 3: Felder und Slots festlegen

   Im `schema` Fieldsets mit Feldern wie `text`, `richtext`, `media`, `link` oder `select` anlegen. Slots mit `name: 'default'` und bei Bedarf `restrictTo` oder `allow` definieren; ohne Blocks gilt `slots: []`.
4. 4 ### Schritt 4: Props ableiten

   Im `<script setup>`-Block `defineProps(definitionToProps(definition))` aufrufen. Props werden nie von Hand deklariert, damit sie mit dem Schema synchron bleiben.
5. 5 ### Schritt 5: Verzeichnis registrieren

   In `src/module.ts` die Ordner über `registerLaioutrApp({ sections: [...], blocks: [...] })` eintragen, falls der App Starter das noch nicht erledigt hat.
6. 6 ### Schritt 6: In Studio testen

   Playground neu starten, Studio neu laden und die neue Section im Picker unter ihrem Label oder ihren Tags suchen. Feldänderungen an bestehenden Komponenten lädt **Developer: Reload Client Context**.

## Ergebnis prüfen

Die Section erscheint im Studio-Picker mit Label, Beschreibung und Vorschaubild, ihre Felder stehen in der Seitenleiste, und in den Slots lassen sich genau die erlaubten Blocks platzieren.

## Häufige Fragen

Wann ist isStandalone: false sinnvoll?

Wenn ein Block nur innerhalb einer bestimmten Section funktioniert, etwa ein Testimonial im Testimonial-Karussell. Er ist dann nur in Slots nutzbar, die ihn in `allow` aufführen.

Wofür ist das Feld ai gedacht?

Für Fakten, die Agenten nicht aus Beschreibung, Feldern und Slots ableiten können, etwa die übliche Reihenfolge vieler Blocks in einer Produktdetail-Section. Vorschreibende Regeln wie "nur verwenden, wenn" gehören nicht hinein, sie verschlechtern die Ergebnisse.

Wie entstehen vorkonfigurierte Varianten beim Einfügen?

Über `studio.propsWizard`. Studio zeigt dann vor dem Platzieren Varianten wie "Centered" oder "Split", deren Props auf die neue Section angewendet werden.

## Passend dazu

- [Sections und Blocks einsetzen](https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen)7 Min.

  Sections sind die großen Bereiche einer Seite in Header, Body oder Footer, Blocks sind Inhaltseinheiten in den Slots einer Section. Beide werden im Layers-Baum hinzugefügt und angeordnet und in den Properties bearbeitet.
- [Die erste eigene App bauen und veröffentlichen](https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen)20 Min.

  Eine eigene App entsteht aus dem App Starter: Paketnamen setzen, Sections, Blocks oder Orchestr-Handler mit registerLaioutrApp registrieren und im Playground testen. Danach bringen npm publish und laioutr app release die Version ins Cockpit, und das nächste Deployment einer Umgebung rollt sie aus.
- [Sections finden: Bibliothek, Growth Kits, Tags und Suche](https://academy.laioutr.com/artikel/sections-finden-bibliothek-growth-kits-tags-suche)4 Min.

  Der Dialog zum Hinzufügen einer Section ordnet alle installierten Sections nach Paketen, filtert nach Growth Kit und Tags und bietet eine Suche, damit die passende Section schnell gefunden ist.
- [Laioutr MCP mit einem KI-Assistenten verbinden](https://academy.laioutr.com/artikel/laioutr-mcp-mit-ki-assistenten-verbinden)5 Min.

  Laioutr MCP verbindet Claude, ChatGPT, Cursor oder einen anderen MCP-Client per OAuth mit den eigenen Laioutr-Projekten. Nach der Freischaltung durch Laioutr genügt die Anmeldung mit dem Laioutr-Konto, ein API-Key ist nicht nötig.

## In einer Lektion lernen

- [Prüfungsleitfaden und Praxisaufgabe](https://academy.laioutr.com/lektionen/entwickler-pruefungsleitfaden)10 Min.
- [Figma-Kit und Übergabe an die Entwicklung](https://academy.laioutr.com/lektionen/ux-designer-figma-kit-und-uebergabe)12 Min.
- [Sections, Blocks und Slots verstehen](https://academy.laioutr.com/lektionen/ux-designer-layoutsystem)12 Min.
- [Eigene Sections und Blocks definieren](https://academy.laioutr.com/lektionen/entwickler-eigene-sections-und-blocks)14 Min.

## [Einstieg für Entwickler](https://academy.laioutr.com/leitfaeden/einstieg-fuer-entwickler)

In diesem Leitfaden suchen

1. [Lokale Entwicklungsumgebung einrichten](https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten)15 Min.
2. [Die Laioutr CLI: Befehle und Authentifizierung](https://academy.laioutr.com/artikel/laioutr-cli-befehle-und-authentifizierung)6 Min.
3. [Die erste eigene App bauen und veröffentlichen](https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen)20 Min.
4. [Eigene Sections und Blocks für Studio definieren](https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren)15 Min.
5. [Orchestr: Entities, Queries, Actions und Resolver](https://academy.laioutr.com/artikel/orchestr-entities-queries-actions-und-resolver)8 Min.
6. [Content Collections im Code deklarieren](https://academy.laioutr.com/artikel/content-collections-im-code-deklarieren)15 Min.
7. [Performance und technisches SEO im Code](https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code)10 Min.

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "de",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "workTranslation": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren#/schema/question/3"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Für Entwickler",
          "item": "https://academy.laioutr.com/bereiche/fuer-entwickler",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Einstieg für Entwickler",
          "item": "https://academy.laioutr.com/leitfaeden/einstieg-fuer-entwickler",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Eigene Sections und Blocks für Studio definieren",
          "item": "https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren#/schema/question/1",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Wann ist isStandalone: false sinnvoll?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Wenn ein Block nur innerhalb einer bestimmten Section funktioniert, etwa ein Testimonial im Testimonial-Karussell. Er ist dann nur in Slots nutzbar, die ihn in <code>allow</code> aufführen.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren#/schema/question/2",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Wofür ist das Feld ai gedacht?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Für Fakten, die Agenten nicht aus Beschreibung, Feldern und Slots ableiten können, etwa die übliche Reihenfolge vieler Blocks in einer Produktdetail-Section. Vorschreibende Regeln wie \"nur verwenden, wenn\" gehören nicht hinein, sie verschlechtern die Ergebnisse.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren#/schema/question/3",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Wie entstehen vorkonfigurierte Varianten beim Einfügen?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Über <code>studio.propsWizard</code>. Studio zeigt dann vor dem Platzieren Varianten wie \"Centered\" oder \"Split\", deren Props auf die neue Section angewendet werden.</p>"
      }
    }
  ]
}
```