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.
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:
composer create-project getkirby/pluginkit site/plugins/your-plugin dev-4-panel --remove-vcs
For our build and dev process, we use a bundler called Parcel. Parcel is basically doing the same thing as tools like Webpack or Rollup, but with less moving parts to know and worry about. 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.
We recommend to install Parcel globally. That way you can reuse it to work on multiple plugins.
npm install -g parcel-bundler
You can also use Yarn instead:
yarn global add parcel-bundler
Once Parcel is installed on your machine, you can start the development process in your plugin directory with …
npm run dev
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.
Parcel has a nice built-in feature called hot module reloading. This means that the Panel will automatically apply changes whenever you work on your plugin code without you having to reload the browser. This should be working out of the box as soon as you loaded the plugin for the first time.
Once you are happy with your plugin, you can create minified and optimized versions of the
index.css with …
npm run build