Cookbook - Sektionen

Stelle dir deine Seiten als Stapel von Sektionen von oben nach unten vor.

Jede Sektion ist eigenständig und kann mit Props konfiguriert werden.

Ohne ein CMS könnte dein Template so aussehen:

<!--home.vue-->

<template>

<SectionHero title="Orbitype" subtitle="Ein modernes CMS"/>

<SectionFigure img=".../foo.png" caption="Lorem ipsum"/>

</template>

Um das dynamisch zu machen, verschiebe den statischen Inhalt nach Orbitype.

Übersetze das HTML in eine JSON-Struktur mit den Props.

Definiere die zu rendernde Komponente im speziellen _orbi-Feld.

// home.json

{

"sections": [

{

"title": "Orbitype",

"subtitle": "Lorem ipsum",

"_orbi": { "component": "SectionHero" }

},

{

"img": ".../foo.png",

"caption": "Lorem ipsum",

"_orbi": { "component": "SectionFigure" }

}

]

}

Durch den Einsatz von glob import und dynamischer Auflösung

kannst du eine dynamische AnySection-Komponente erstellen.

<!--AnySection.vue-->

<script setup lang="ts">

const all = import.meta.glob("~/components/sections/*.vue", { eager: true })

const components = Object.values(all).map((x) => x.default)

defineProps<{ data: Record<string, any> }>()

</script>

<template>

<component

:is=" components.find((x) => x.__name === data._orbi.component)"

v-bind="data"

/>

</template>

Ersetze dann deine hartcodierte Liste von Komponenten durch eine Schleife über AnySection.

Übergebe die aus Orbitype stammenden Daten als Array.

<!--home.vue-->

<script setup lang="ts">

const page = await $fetch(import.meta.env.VITE_S3_URL + "/pages/home.json")

</script>

<template>

<AnySection v-for="section of page.sections" :data="section"/>

</template>

Und das war’s!

Du kannst jetzt Sektionen in Orbitype hinzufügen, entfernen, bearbeiten und neu anordnen.

Und das alles, ohne eine einzige Zeile Code zu ändern.