Blog

Terug

Een JAMstack page builder met Nuxt en Prismic Slice Machine

hoofdafbeelding van het artikel
  • Nuxt
  • JAMstack
  • Prismic
Leestijd 0 min

Veel websites (vooral in de WordPress wereld) maken gebruik van page builders, oftewel het concept om je pagina's op te bouwen met herbruikbare blokken.

Klanten zijn vaak erg enthousiast over deze manier van werken, omdat ze zelf een grote mate van vrijheid hebben over het samenstellen van de inhoud van de pagina's. Denk hierbij een een scenario zoals hieronder:


Goed nieuws: ook JAMstack biedt deze mogelijkheid!

Bij een JAMstack website zijn het (headless) CMS en de frontend van elkaar gescheiden. Gelukkig zijn er verschillende oplossingen bedacht om met page builders te werken en een die erg prettig werkt is de Prismic Slice Machine. Prismic is een zeer betaalbaar headless CMS met goede mogelijkheden om een website in te richten. Ze zijn daar een stap verder gegaan door de zogenaamde Slice Machine te ontwikkelen. Een slice is een herbruikbaar blok, dat je aan het CMS kan toevoegen en door verschillende slices (blokken) te combineren kan je een creatieve pagina inrichten.

Prismic en Nuxt: een perfecte combinatie

Prismic heeft ervoor gezorgd dat de Slice Machine makkelijk te gebruiken is in combinatie met verschillende frameworks, waaronder Nuxt, waarmee Corneel Online graag werkt. Er is zelfs een uitgebreide documentatie beschikbaar voor ontwikkelaars die hiermee aan de slag willen.

Hoe werkt de Slice Machine?

De Slice Machine is een app die je aan de ontwikkelomgeving van de website kan toevoegen en die gekoppeld is aan het Prismic account dat in gebruik is. Nadat alles goed geïnstalleerd is maak je in de terminal een eerste component template aan.

prismic sm --create-slice

Hiermee wordt voor de slice een component aangemaakt in de Nuxt-installatie. Daarna kan je de Slice Machine opstarten en in je browser gebruiken om via een handige user interface velden aan de slice toe te voegen.

Met de optie "show code snippets" wordt de code zichtbaar die je in het Nuxt component kan gebruiken om de content van de velden in de slice te tonen die in het CMS wordt toegevoegd.

Als de slice klaar is kan je deze naar het CMS doorsturen met de optie "Push Slice to Prismic" waar deze beschikbaar is als bouwsteen van de pagina.

Het tonen van de ingevoerde content wordt heel eenvoudig gemaakt door het vue-slicezone component. In de <script> sectie wordt de content uit Prismic opgehaald en deze wordt in de <template> sectie getoond met het <slice-zone> component. Dit component weet welke slices er in de betreffende pagina gebruikt zijn en bouwt de pagina op m.b.v. de eerder aangemaakte slice componenten in de Nuxt-installatie.

Conclusie

Prismic heeft in samenwerking met Nuxt een hele vlotte en intuïtieve workflow gecreëerd waarmee je als web developer heel productief bent. Het biedt klanten de mogelijkheid naar eigen inzicht de pagina's van hun eigen website in te richten met een heel prettig en duidelijk CMS en tegelijkertijd van de voordelen te profiteren die een JAMstack website biedt.

Werk jij graag met een page builder?

En mag het allemaal een stuk sneller? Dan is een JAMstack website met page builder echt iets voor jou!

Neem contact op

Wat houdt je bezig?

Heb jij een interessant project?
En wil je erover praten?

Of je nou een starter bent of een doorgewinterd bedrijf, ik hoor het graag als je een leuke uitdaging voor me hebt.

Marco Verheul
T. 06 2846 1106
E. marco@corneelonline.nl