We have created a simple example plugin called the Pluginkit. You can find the code for this tutorial in the
If you want to follow along, you can download a ZIP file of that branch or get it via Composer:
Note: Composer is not required to follow this tutorial.
For our development and production process, we use a bundler called kirbyup. It is tailored for Kirby Panel plugins, utilizing Vite under the hood, and works right out of the box. It will help to compile Vue's single file components, convert SASS in your style blocks, minify your code when you build your plugin and more.
You don't even have to install kirbyup. When running your first npm command, kirbyup will be remotely fetched and available for all subsequent commands. The initial package fetching might take a moment.
You can start the development process in your plugin directory with:
This will automatically create your plugin's
index.css and keep those files updated whenever you make changes.
Your Panel plugin code is located in the
src folder. Your main plugin file is
src/index.js. In that file you can import Vue components and define all your different plugin types. In our example setup, we've created a simple custom view that will appear in the Panel's main menu. But you can use this for fields, sections or any other type of Panel plugin of course.
Reload the Kirby Panel after you have updated the plugin's code to inspect your changes.
kirbyup 2.0.0 introduced a new
serve command that allows hot module reloading. This feature will automatically reload the Panel if you make changes to your plugin. The new
serve command requires Kirby 3.7.4+ and modern development browsers.
You can use the
serve command instead of
npm run dev:
Additional options can be passed if needed by updating the command in
package.json or you can pass them manually like this:
Once you are happy with your plugin, you can create minified and optimized versions of the