Cacao Kit

Demo & Semi Documentation

Why Cacao Kit?

Because it condenses everything I learned integrating a headless Kirby instance with Nuxt, while also containing a great developer experience and features like internationalization.

Why Nuxt?

Nuxt is a frontend framework built upon Vue.js that offers great development features such as server side rendering, automatically generated routes and improved meta tags managing for SEO.

Semantic HTML

This starter kit uses semantic HTML elements styled by the classless CSS framework new.css to pleasen your eye. You can remove the stylesheet by deleting the link tag in the app.vue component.

Everything is a block, if you want it to be.
Cacao Kit

One of the key selling point of this starter kit is a block-first structure. A block in the Vue frontend is just another component. Instead of writing multiple KQL queries for each and every page in the frontend, blocks handle, how the layout should be built in the frontend.

Of course, you can send KQL queries to your Kirby instance from within your block components or create Nuxt pages if this setup doesn't speak to you.

Cacao vs. Cocoa

Cocoa and cacao are both derived from the same plant, Theobroma cacao. However, they are different in terms of their processing and usage.

Cacao refers to the raw, unprocessed form of the cocoa bean, while cocoa refers to the processed form of cacao that is typically used in chocolate-based products and baked goods.

Articles are also available

The article grid is a custom block! ⬇️