Plugin setup for Panel plugins

Our Panel is based on Vue.js and your Panel plugins will be built with Vue as well. You can create your plugins without a build process, but if you want to use Vue's genius single file components and a more comfortable setup, we've got you covered.

Our Pluginkit for Panel plugins is almost identical to the basic setup – except the JavaScript parts. If you haven't built a Kirby plugin yet, we recommend to read the basic setup guide first to get an idea of the general architecture.

Installation

We have created a simple example plugin called the Pluginkit. You can find the code for this tutorial in the 4-panel branch.

If you want to follow along, you can download a ZIP file of that branch or get it via Composer:

composer create-project getkirby/pluginkit site/plugins/your-plugin dev-4-panel --remove-vcs

Note: Composer is not required to follow this tutorial.

Introducing kirbyup

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 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.

Development process

You can start the development process in your plugin directory with:

npm run dev

This will automatically create your plugin's index.js and index.css and keep those files updated whenever you make changes.

The `src` folder

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.

Panel reloading

Reload the Kirby Panel after you have updated the plugin's code to inspect your changes.

Since 3.7.4

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:

npm run serve

Additional options can be passed if needed by updating the command in package.json or you can pass them manually like this:

npm run serve -- --port 1234

Building your plugin

Once you are happy with your plugin, you can create minified and optimized versions of the index.js and index.css with:

npm run build