Kirby 3 as Headless CMS for Vue/Nuxt

Kirby 3 Questions 🤔
1

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 Kirby API and get all the data using Vue templating instead of PHP. I would love to get rid of Wordpress and to use Kirby as my default CMS again :smiley:

7 Likes
2

We will soon publish a Cookbook recipe, didn’t make it before the launch, unfortunately. But there are people who are already doing it so they might be willing to share their experiences.

Please use the Kirby 3 subcategories for your topics!

5 Likes
3

Awesome, thanks! I will definitely be playing around with it tonight, trying to figure it out myself. Looking forward to the Cookbook recipe!

Sorry for not using the topics, I got excited and published too fast :open_mouth: Congrats on launching Kirby 3!

4

No problem, I understand that.

1 Like
5

Same here. Heavily interested, so if anyone could share some experiences made along the way I am thankful. Otherwise I am looking forward to the cookbook recipe.

6

super noob q meanwhile: do we have to set routes for accessing the kirby api endpoint or not?

if i visit site.net/api/ i get the error page.

if i try the example posted on the guide, like

<script>
    const csrf = "<?= csrf() ?>";
    fetch("/api/pages/some-uid", {
          method: "GET",
          headers: {
            "X-CSRF" : csrf
          }
        })
        .then(response => response.json())
        .then(response => {
          const page = response.data;
          console.log(page);
          // do something with the page data
        })
        .catch(error => {
          console.log('oops, error');
          // something went wrong
    });
</script>

i’m trying to replace kirby-spad to use the new core rest-api / headless cms functionalities of kirby 3.

i get undefined in the console.log.

7

I could be wrong but…

do we have to set routes for accessing the kirby api endpoint or not?

No you don’t. The api is available by default and can be disabled via config.
That said, I think you need to be authenticated to access the endpoint.

Not 100% sure though

EDIT

Relevant → Introduction | Kirby CMS

8

Yes, you need to be authenticated to use the session-based authentication that is described here:
https://getkirby.com/docs/guide/api/authentication

It’s also possible to use basic authentication (also described on that page, turn on basicAuth in the config, use SSL):

<?php

$response = Remote::get('https://yoursite.com/api/pages/example', [
  'headers' => [
    'Authorization' => 'Basic ' . base64_encode($email . ':' . $password)
  ]
]);

$page = json_decode($response->content())['data'];

but I didn’t get that to work, yet, though I thought I followed the setup as described. I may be doing something wrong, not sure.

My goal was also to set up Nuxt with Kirby, but haven’t succeeded, yet.

1 Like
9

thanks both for responding!

basic authentication does not fit my needs, i simply need to output kirby content as json (what used to be content representation).

is the Session-based authentication working for you? could you share your working snippet of code?

EDIT

maybe it has to do with the fact that i’m working locally using php -S to create the server… but there are now dots in the url :thinking:

EDIT 2: :innocent::sweat_smile: it was not working because i was not logged in to the panel. thing is: how can you have it working while you are not logged in?

10

on a second thought, i think i am maybe misunderstanding the usage of APIs in this case, and can get away with using content representation altogether.

:slight_smile:

11

I have looked at this, but first I need a way to parse kerbytext client side in some way otherwise I can’t work with it, as there is no way I am sending HTML over a REST service. Have you thought about how to resolve this?

12

yes, i’m trying to upgrade kirby spad to the new kirby plugin rules!

1 Like
13

Yes, but that still sends the content over as KirbyText, still need to parse that to display to the user.

14

yes you are right.

the way im fixing that was to set an option in the config.php to not use kirbytext but “regular” markdown. hopefully this is still possible with kirby 3.

15

I’ve tried to use the session-based authentification example in the docs, I can’t get it to work, I get a 403 forbidden error.

I simply want to get the pages content as json, to be able to display it in an SPA on the frontend. Basically just using the API as a headless CMS.

Is this a correct use case of Kirby’s API, or have I just misunderstood what Kirby’s API is?

Has anybody seen any snippet of code that they could share?

edit 1: With the previous comments, I’ve started to read about generating json and content representations with Kirby. Maybe this is what I was looking for instead of using the api…

16

i just sent a PR to the plugin i was using before to make SPA, check it here upgrade plugin to kirby v3 syntax by sonn-gamm · Pull Request #3 · jongacnik/kirby2-spad · GitHub

and my forked version https://github.com/afincato/spad

Is this a correct use case of Kirby’s API, or have I just misunderstood what Kirby’s API is?

yeah, i’m a bit confused as well. let’s wait for the official answer :slight_smile:

1 Like
17

sorry to flood on this, but: i find it unclear why you need to be logged in to the panel in order to get access to the API route?

isn’t that the whole idea of using session-based communication between kirby’s APIs and your frontend app?

looking forward to the cookbook article :stuck_out_tongue_closed_eyes:

18

The first example in the docs assumes you’re executing that code as a logged in user (at least I think it does :grin:).
If you log in to the panel the code indeed does work.

01
Screenshot 2019-01-23 at 13.51.01.png972Ă—876 90.5 KB

19

Yes, I can confirm that you need to be logged in (i.e. authenticated) to the panel for the first example. Why that is, I don’t know, I’m sure the Kirby team will have an answer. Maybe because foremost the API is used for the Vue-based panel as of now.

I can also confirm that I cannot get the basic auth to work as described in my post earlier. I also receive a 403 error. Not sure about this one, might still be buggy. Maybe best to open an issue on Github, I’ll do that.

20

Maybe because foremost the API is used for the Vue-based panel as of now.

Yes, unfortunately that is what I’m thinking, it doesn’t look like it is supposed to be used on the frontend without being logged in. I was really excited to come back to Kirby after having to use WP, Prismic or others for my apps. I hope I’m wrong!