Kirby-rest-api-vue-plugin NPM

Kirby Rest Api Vue Plugin

A vue plugin, that is build to communicate easily with Kirby Rest Api. The plugin reflects the api methods and (optionally) converts the requested data.

Installation

npm install kirby-rest-api-vue-plugin

Importing to project

The classic way

import apiPlugin from 'kirby-rest-api-vue-plugin'

# set some default options, at least the host
const options = {
  host: 'http://domain.com/rest-api',
  [lang: 'en',]
  [parse: ['router-links', 'nl2br', ...]]
}

createApp(App)
	.use(apiPlugin, options)
	.mount('#app')

Or use createApi() function

import { createApi } from 'kirby-rest-api-vue-plugin'

# pass options to createApi
const apiPlugin = createApi({
  host: 'http://domain.com/rest-api',
})

createApp(App)
	.use(apiPlugin)
	.mount('#app')

Requesting data

async myFunction() {

  # Create a new request
  const request = this.$api.request()

  # overwrite host and language from Plugin configuration (only for single request)
  request.host('http://otherdomain.com/rest-api')
  request.lang('dk')

  # request fields
  request.fields('myfield', 'myotherfield')

  # request all fields
  request.fields('all')
  request.all() // shortcut

  # configure children()-request
  request.limit(5) // integer count of children
  request.page(2) // integer pagination
  request.order('desc') // asc|desc sorting

  # don't parse result
  request.parse('raw')

  # configure parser
  request.parse(
    'router-links', // convert <a>-tags in html fields to router-links
    'nl2br', // replace newline to <br> in textfields
    'include-label' // include labels from select fields
    'image-objects' // return an image object instead of raw image data
  )

  # request
  const json = await request.languages()
  const json = await request.node('/path/of/slugs') // leave empty for site data
  const json = await request.children('/path/of/slugs') // leave empty for site children
  
  # log result
  json.log()
}

### Short notation
async myFunction() {
  const json = await this.$api.request().all().node('/path/of/slugs')
  json.log()
}

Composition Api

In this case you have to use in parent component

<script setup async>
	import { createRequest, createImage } from 'kirby-rest-api-vue-plugin'
	const res = await createRequest().all().node('/path/of/slugs')
	const image = createImage(res.content.imagefield[0])
</script>

For documentation of the Api methods see Kirby Rest Api.

Image

Resized images can be easily requested from Kirby:

const image = this.$api.image(
  json.content.myImageField[0], // simply pass node from result
  [width] // null|integer requested width in px
  [height] // null|integer requested height in px
  [crop] // null|true or option below, true is shortcut for 'center'
  [blur] // null|integer blur factor > 0
  [bw] // bool black/white
  [quality] // null|integer jpg quality <= 100
)

# Image data can than be taken from the object. Kirby automatically resizes
# and caches the new image.
const src = image.src
const width = image.width
const height = image.height

crop options : 'top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right'