For our very first Panel area, we will query a third-party REST API and display the results in a nice card layout:
As an example API, we will be using the NYT Article Search API, for which you need an API key. Feel free to use any other API or data from a database. Of course, if you do so, you will have to adapt the code where necessary.
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 callmoviereviews
. Inside this folder, we first create apackage.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.
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.
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.vue, we use Kirby's
k-header components for our basic view setup. You can find more information about these components in the UI Lab
Within the script tags, we set up the same props we already defined in our
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.
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:
Once you are happy with your plugin, you can create minified and optimized versions of the
index.css with …
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.