Skip to content

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.

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

Introducing Parcel

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

Development process

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

Hot module reloading

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.

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