Adding links/buttons to panel page header


I am trying to add a few custom buttons to the panel header on specific templates (e.g. someTemplate), like this:

I couldn’t find any method to add those, so I added a custom JS file by adding this to config.php:

return [
  'panel.js' => 'assets/js/panel.js',

I couldn’t find any way to extend <k-button-group> in kirby/panel/src/components/Views/PageView.vue. But I am not using multiple languages, so I overwrote <k-languages-dropdown /> like this:

panel.plugin("my/plugin", {
  components: {
    'k-languages-dropdown': {
      extends: 'k-languages-dropdown',
      template: `<k-button
        v-if="window.panel.$view.props.blueprint == 'someTemplate'"
        :link="window.panel.$view.props.model.previewUrl + '.qr'"
        text="QR Code"

As I don’t have access to all the Vue templates and variables, I had to go through the window variable and walk down to window.panel.$view.props.blueprint and window.panel.$view.props.model.previewUrl. It works, but it looks very very hacky… So what would be the right way to add those custom buttons?

How could I add buttons without overwriting the languages dropdown?

You could overwrite the page view:

But that way I would have to replace the whole k-button-group, correct? That would mean I would have to re-add all the standard buttons.

Likely the whole page view, because the button group is part of the view: kirby/PageView.vue at main · getkirby/kirby · GitHub

Maybe it would even be possible to extend the button group conditionally, i.e. if it is inside a page view, but I’m no Vue expert.

Well you can certainly overwrite any element inside the view, as I did in my example on top. So the whole page view shouldn’t be necessary. I just couldn’t find any way to append a Vue template to the existing DOM.