Kirby + Svelte/Sapper

[Tobias_L]

Hi, has anyone already worked with Svelte/Sapper in combination with Kirby as a Headless CMS?
If yes, was it complicated to set up and would you recommend it? I’m looking into Vue of course but Svelte seems intriguing as well.

Svelte • Cybernetically enhanced web apps

[bruno]

*push* as I really want to start learning Svelte but also can’t live without Kirby. There seem to be a lot of starting reference points here:

Kirby 3 as Headless CMS for Vue/Nuxt

Hey! I have just received the announcement about Kirby 3 being here, I’m very excited to try it out! I’ve been looking around in the docs, but I’m wondering: does anybody have any tutorials, resources or project that you could share, for using Kirby as a headless CMS, with Vue cli or nuxt as the framework? Recently, I’ve been creating projects using Vue/Nuxt for the templating, and fetching the content data from with WordPress Rest API using axios. I would love to see how people set up the Kir…

but a definite “how to start” would be amazing.

[renestalder]

I’m sorry to not directly answer your question, but I can give you the fundamentals to get started with that.

It doesn’t matter which framework you actually use, whether this is Vue/Nuxt, Svelte, React. The approach is the same and the foundation you need to know is the same.

I use Kirby together with static-side generators (in my case Eleventy, 11ty) and the principles are the same, thus it also works for any client-side approach.

Here’s what I recommend you:

1. Know how to retrieve data from an API in the framework you want to use e.g. fetch, axios, do I put it in my state managers actions/effects or not, do I want to normalize my data or not before putting it in into the store.
2. Get to know the Kirby API
3. Create a user in your CMS instance that has read-only access. Permissions blueprint example.
4. Alternatively, install the KQL plugin to have more flexibility in your API requests.

With that, you’re on the same page as with retrieving data from any other API. Just really make sure you harden those user permissions as your authentication method/password is completely exposed on the client-side.

[silvan]

Another simple approach (if you only need to read public data) I used on one site is to simply return JSON from your templates. It was really straight-forward and was close to working with normal templates. You can then use the URLs / routing provided by Kirby as your custom API.

Some sample code:

<?php
$data = [
  'text' => $page->text()->kirbytext()->value(),
  'title' => $page->title()->value(),
  'uid' => $page->uid()
];

// set response content type to `application/json`
$kirby->response()->json();

echo json_encode($data);

Edit: This Vue starterkit mentioned by @texnixe in this thread seems to use the same idea.