Access kirby objects in Custom Block Vue component (blocks field)

The CMS Questions
1

Hey – is it possible to have access to the site object within a custom vue component to create the view for a custom block used in a blocks field? From the docs the only object I found is content, which holds all data that was stored to this custom block component definition.

In my case i made a custom block element, which refers to other pages (via select field). Those pages are practically just modules, which can be reused accross the site. Currently I only can output the id of the page, but I really would like to give it a more rich content style, by access the page (module) data with its title, cover image and some other content.

panel.plugin('blocks/modulblock', {
  blocks: {
    modulblock: `
        // just display something like "modules/modulname"
        <div>{{ content.modul }}</div> 
        // kirby query api not available here – or did i miss something?
        <div>{{ site.pages.find(content.modul).title }}</div> 
    `
  }
})

In the docs I didn’t find any informations, which objects are available within a Vue-Component.

Thanks for your help

Matthias

2

This recipe should help you: Creating a custom block type from scratch | Kirby

You cannot just get this information in the template, but need to set up methods:

3

Thanks for this link. It worked out for me. In addition I want to share my final (simplified) result.

The Kirby API is available in Vue-Components via

this.$api

It seems that most API methods are async. Because of that, it is not possible to make queries within the template definition itself. So you need a little workaround like this:

panel.plugin('blocks/modulblock', {
  blocks: {
    modulblock: {
      data() {
        return {
          moduleTitle: ""
        }
      },
      created() {
        this.apiRequests()
      },
      methods: {
        async apiRequests() {
          const page = await this.$api.pages.get(this.content.modul);
          this.moduleTitle = page.title;
        }
      },
      template: `
        <div>{{ modulTitle }}</div>
      `
    }
  }
})
4 Likes