Kirby CMS Documentation

If you are using Laravel Herd for your local setup, you must enable HTTPS in Vite to match your local environment. Create a /panel/vite.config.custom.js file and point it to your Herd certificates.

Note: You must replace XYZ with your local system username and ensure the paths to the .key and .crt files are correct for your operating system.

/* eslint-env node */
import fs from "fs";

module.exports = {
	https: {
		key: fs.readFileSync(
			"/Users/XYZ/Library/Application Support/Herd/config/valet/Certificates/sandbox.test.key"
		),
		cert: fs.readFileSync(
			"/Users/XYZ/Library/Application Support/Herd/config/valet/Certificates/sandbox.test.crt"
		)
	}
};

To develop the Kirby Panel, you must enable development mode in your Kirby project configuration and install the necessary dependencies.

1. Enable panel.dev mode by adding 'panel.dev' => true to your site/config/config.php file.
2. Install dependencies using npm i.
3. Start the development server using npm run dev.

return [
  'panel.dev' => true
];

Kirby is a flexible CMS designed to adapt to any project. Instead of using this core repository directly, you should start with one of the official kits to set up a working environment:

• Starterkit: A comprehensive starting point for building projects.
• Plainkit: A minimal, lightweight starting point.

You can also try Kirby for free on your local machine or a test server to evaluate it before purchasing a license.

You can apply pre-defined theme colors to any element by using the data-theme attribute. When an element has this attribute, it receives a set of CSS variables that can be used to style its children and the element itself. This allows for consistent color application across the Kirby Panel UI.

Available themes include:

• blue (alias: info)
• green (alias: positive)
• yellow (alias: warning)
• orange (alias: notice)
• red (alias: error|negative)
• pink (alias: love)
• aqua
• purple
• gray (alias: passive)
• white
• aqua
• purple
• gray (alias: passive)
• white

There are three ways to handle interactions in a k-options-dropdown:

1. Direct Function Call: Pass a function directly to the click property of an option object. This is the most straightforward method for local logic.
2. Local Event Emitting: Set the click property to a string. The component will then emit that string through the @action event on the component instance.
3. Global Event Dispatching: Set the click property to an object containing global (the event name) and payload. This allows the dropdown to trigger events globally via the Kirby Panel's event system, which can be listened to anywhere in the application using this.$panel.events.on().

To provide rich, field-specific error feedback in the Kirby Panel (such as form validation errors), throw a Kirby\Exception\InvalidArgumentException from your PHP backend.

This exception allows you to pass a fallback message and a details array. The details array maps keys to specific error information, including a label and a message (which can be an array of strings). The Panel uses this structure to display granular error details to the user.

throw new Kirby\Exception\InvalidArgumentException(
	fallback: 'Exception with details',
	details: [
		'a' => [
			'label'   => 'Detail A',
			'message' => [
				'This is a message for Detail A',
			],
		],
		'b' => [
			'label'   => 'Detail B',
			'message' => [
				'This is the first message for Detail B',
				'This is the second message for Detail B',
			],
		],
	]
);

The Dialogs module provides a set of Vue components for displaying various types of dialogs (modals) within the Kirby Panel. To use these components in a custom Kirby Panel extension or application, you must call the install method, which registers the Elements plugin and all available dialog components with the Vue application instance.

Once installed, components are available using their k- prefixed names.

To add pagination to a .k-table, place a <k-pagination /> component immediately after the </table> element, but still inside the .k-table container. Use the .k-table-pagination class on the component to apply table-specific styling.

Required props for <k-pagination />:

• limit: Number of items per page.
• page: The current active page.
• total: The total number of items available.
• details: Boolean to show/hide pagination details (e.g., "1-2 of 10").

<div class="k-table">
  <table>
    <!-- ... table content ... -->
  </table>
  <k-pagination
    class="k-table-pagination"
    :details="true"
    :limit="2"
    :page="1"
    :total="10"
  />
</div>