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 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.
You can also use Yarn instead:
Once Parcel is installed on your machine, 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.
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 …