Kirby 3 as Headless CMS for Vue/Nuxt

Kirby 3 Questions 🤔
39

We’ve found the Kirby 3 API and Nuxt to be a great mix, but there are a few parts of the process that need some work.

You’ll probably need to use basic auth for API requests, as your Nuxt/Vue/SPA app may not have easy access to the CSRF field.

See here for how to enable basic auth in your Kirby config https://getkirby.com/docs/guide/api/authentication#http-basic-auth

Second hurdle is that currently Kirby will drop any basic auth API request if it is done without HTTPS. There’s some discussions and pending updates to Kirby that will hopefully resolve this, but for now I am manually patching my Kirby 3 sites to allow non-HTTPS API requests with basic auth.

I create a specific API-only Kirby user in my site. You may need to give this API-specific user reduced permissions. Be aware that a crafty user could reverse the email/password from the API and log in to your panel with the API account if this is used client side.

You might create a Kirby role called api (see Kirby permissions documentation)

Comment out these three lines in your Kirby src/Cms/Auth.php file https://github.com/getkirby/kirby/blob/72f01eac0a7db59360894e0cfb44680276260174/src/Cms/Auth.php#L73-L75

Once you’ve done that your API should work in development. Here’s a snippet of code for setting up the API in your JS app with axios (this will work on the client or server).

const axios = require('axios')

const kirbyEmail = 'api@yoursite.com'
const kirbyPassword = 'api-specific-password'
const kirbyBase = 'http://localhost:8888/kirby-site/api'

const authorization = Buffer.from([
  kirbyEmail,
  kirbyPassword
].join(':')).toString('base64')

const api = axios.create({
  baseURL: kirbyBase,
  headers: {
    Authorization: `Basic ${authorization}`
  }
})

From there, consuming the API in javascript-world looks like:

const res = await api.get('/pages/home')
const page = res.data

I’m working on a Nuxt module for this that will make things simpler. There’s potential to improve the process and support lots of developers wanting to build with Nuxt and the Kirby API.

6 Likes