Kirby 3 as Headless CMS for Vue/Nuxt

Kirby 3 Questions 🤔
81

No, I’m afraid there is no recipe for this. Anyone volunteering?

82
3 Likes
83

I also really would like a cookbook recipe for this. I am familiar with Kirby, learning vue.js and have unfortunately no idea how to set them up together.

4 Likes
84

Hey y’all!

Are there any news on this? I checked the latest link leading to the getkirby/kql repository. I wanted to try the plugin but it seems like there is no official release yet (January 2021).

I’m also looking for a way to use Kirby with Vue/Nuxt, and when I manage to implement a solution like the KQL plugin, I’m also happy to volunteer for writing a cookbook recipe like @texnixe asked back in May 2020.

Looking fwd hearing from you people!

Cheers
Max

85

I’m using this starterkit at the moment and it’s working great.

2 Likes
86

Thx! Will definitely take a look at this :slight_smile:

1 Like
87

Over the last year, I only have used Kirby as a headless CMS with the frontend being hosted on Netlify or something. I am really happy with the workflow. My best practice is (until now and open for overthinking that):

  1. create global page method like $page->json() returning an array of everything that you generally want to know about a page on the frontend
  2. create a route like json/(:any), find the requested page and return the array obtained from the json() method. eg. return page( $any )->json()
  • You can extend the json() method within single page models.
  • You can do the same for $site, $file, $pages, $files.
  • You can have a parameter like json( bool $full ) to switch if you want to have a short version of the page data (e.g. only title and url to render a list) or if you want a more detailed dataset including all fields (e.g. for rendering a single page view).
  • And you can cache the results within the route.
  1. In the frontend you just fetch the /json/... api and have your content ready to go.

This is a very simplified approach, without auth or anything, but I like the api result to only include exactly what i need, in a format that already mimics the way i will use the data in the frontend. (Almost like the GraphQL idea)

The only real downside with the complete separation of front- and backend is that you will always have to keep some information about your page in the frontend as well, e.g. some page structure, metadata, slugs or something. Which will thus become unchangeable in the backend.

I don’t know if this is really smart, obvious or stupid :slight_smile: Just sharing my approach to this.

Ah, and since it’s been a topic: I actually do parse all kirbytext fields on the backend and send the html through the api. I see the spoofing point, but for all projects that don’t handle sensitive user data i think it’s not that relevant. And a frontend kirbytext parser would be way too much overhead.

1 Like
88

Interesting! So do you use the JSON Representation approach but in a very general way? Could you share some more code? That would be awesome.

89

I mostly do it as follows:

  1. Create a page method, e.g. $page->json() that returns an array of information about some page:
/* your Kirby plugin */
'pageMethods' => [
  'json' => function (): array {
    return [
      'title' => $this->title()->value(),
      'path' => $this->id(),
      'template' => $this->intendedTemplate()->name(),
      /* or any other fields that you need */
    ];
  }
]

2a. You can already call that $page->json() to get that array. For example if you want to use that in some JS on your frontend:

<!-- snippet/header.php -->
<script>
  let pageData = <?= json_encode( $page->json() ) ?>;
  console.log( pageData );
</script>

2b. But maybe you want to fetch that json with JS at a later stage. For that, create a /json/... route that returns your array:

'routes' => [
  [
    'pattern' => 'json/(:all)',
    'method' => 'GET',
    'action'  => function ( $id ) {
      return page( $id )->json();
    }
  ]
]

You can now fetch site.com/json/page-id to get your page data.

  1. Going from here:
  • Use page models to adjust the result of $page->json() to a specific content type/template
  • Implement some cache inside that route
  • Add also $pages->json(), $file->json(), $files->json(), $site->json()

:warning: Code not tested, may be stupid, just to demonstrate a possible approach

I am working on a plugin as a boilerplate for that. You can find the current state here, but this is far from it’s final stage: GitHub - moritzebeling/kirby-headless: Public and customizable Json API Endpoint for Kirby CMS

2 Likes