My first Panel area
For our very first Panel area, we will query a public API and display the results in a nice card layout:
For the purposes of this recipe, we assume you have read the Panel plugin setup guide on how to get started with our Panel plugin bundler kirbyup.
You can install the Pluginkit as a basis or create the file structure we need manually, that's up to you. Also, it doesn't matter if you use the Plainkit or the Starterkit as a starting point.
Let's start by creating a new folder in the plugins folder, which we will call
moviereviews. Inside this folder, we first create a
package.json file with the contents copied from the Pluginkit example mentioned above.
This will take care of compiling our source files into an
index.js file in the root of our
moviereviews plugin folder.
Setting up the PHP part
The most important stuff for our new area happens in the PHP part. Inside the
moviereviews folder, we create an
index.php with the Kirby plugin wrapper. And inside this wrapper, we define the new area:
We define a new area inside the
areas array. Within that array, the
views array contains the different routes that belong to the area. Here we only define one main view.
Each route returns an array which will be injected into our Vue app. The array controls the Vue component, the props for the component, and the settings for the current view (like breadcrumb, title, active search type etc.).
In our example, we set the component (
moviereviews), the document title and the props.
moviereviews route, we also fetch the data from the API and pass it to the props using the
Remote::get() method. Don't forget to insert your API key!
If you want to inspect the structure of the returned json data, you can open the API URL in your browser or use a REST API client like Insomnia or similar.
Create the view component
Next, we create a new folder called
/src inside our
moviereviews folder. Inside the
src folder, we create an
In this file, we register the
moviereviews component we define in our
index.php. The view itself will be defined in the
components subfolder and called
MovieReviews single file component
MovieReviews.vue, we use Kirby's
k-header components for our basic view setup. You can find more information about these components in the UI Kit docs
Within the script tags, we set up the same props we already defined in our
Compile and check
Now let's run
in our plugin folder, and kirbyup will compile an
index.js in the
If all went well, we will now see a new menu entry in the Panel dropdown navigation, and when we click on it, we can visit the newly created view that's still empty at this time.
A component for our data
All that's left now, is create the component for our API data. Kirby's ready to use Vue components make this really easy. For a nice cards layout, we use the
v-if directive we check if the
reviews array has any items and if so, we loop through the items (
v-for="(review, index) in reviews") and create a card item for it. Otherwise (
v-else), we just display a note:
Building your plugin
Once you are happy with your plugin, you can create minified and optimized versions of the
index.css with …
Final folder structure
Where to go from here
To get more familiar with how this all plays together, play around a bit. Try to get other data in, e.g. from a database, a .csv file, another API or try to fetch some data from your Kirby installation. Adjust the data provider route as needed. Or simply change the layout to cardlets like in this screenshot:
To go further, check the advanced Panel area cookbook.