Inject built-in components inside Panel area

The CMS Questions
1

Hi,

I’ve created a very basic stats plugin for my site. Now I’m trying to display the collected data inside a Panel area. I don’t want to have to create a custom Vue component, while there’s a great collection of built-in components. So far, I’ve managed to add a link to the left sidebar which opens a panel area, like this:

<?php

Kirby::plugin('chch/dumbstats', [
  'areas' => [
    'dumbstats' => function ()  {
      return [
        'label' => 'Dumb Stats',
        'icon'  => 'chart',
        'menu'  => true,
        'views' => [
          [
            'pattern' => 'dumbstats',
            'action' => function () {
              $columns = [];
              $rows = [];
              // ...more logic here...
              return [
                'component' => 'k-table',
                'props' => [
                  'columns' => $columns,
                  'rows' => $rows
                ]
              ];
            }
          ]
        ]
      ];
    }
  ]
]);

Screenshot 2026-02-03 at 08.45.34
Screenshot 2026-02-03 at 08.45.343024×1734 73 KB

All works fine, only my k-table component opens on an empty page, not inside of the Panel area, which is what I would like. I’ve been trying to figure out how to use the available components to achieve that, but no luck yet.

With k-panel-inside I’ve managed to get the Panel layout to show, but empty.

return [
  'component' => 'k-panel-inside',
  'slots' => [
    'default' => [
      [
        'component' => 'k-table',
        'props' => [
          'columns' => $columns,
          'rows' => $rows
        ]
      ]
    ]
  ]
];

Screenshot 2026-02-03 at 08.46.14
Screenshot 2026-02-03 at 08.46.143024×1630 59.4 KB

Anyone knows what’s the correct syntax to add my components to the Panel area?

Cheers!

2

After hitting my head against the wall for while, I finally found the solution:

Needed to add this on an index.js file at the root of my plugin folder:

panel.plugin('chch/dumbstats', {
	components: {
		dumbstats: {
			props: {
				columns: Array,
				rows: Array
			},
			template: `
				<k-panel-inside>
					<k-view class="k-dumbstats">
					  <k-header>Dumb Stats</k-header>
					  <k-table :columns="columns" :rows="rows" />
					</k-view>
				</k-panel-inside>
			`
		}
	}
});

No build process required. Lucky me! :slight_smile: