Views are the building blocks of the Panel. While the Panel is very extensible already with fields and sections, you might reach the point where you need your own dedicated space in the Panel - or where you might want to replace an existing view.
With a Panel view plugin you can build your own stand-alone view, that is just accessible via link, located in the main menu or replaces an existing default view.
Such Panel views can maybe contain just some static documentation for the project, but can also be extended to highly interactive Vue applications. Think about an integrated task management system, a newsletter tool, a form builder, an ERM system or more. It's all up to your imagination and project specs.
- PHP code for the REST API:
- Vue code for the Panel:
- Optional CSS:
Unless you want to extend other parts of the Panel, a custom view does not require any specific PHP code. But you still have to create an
index.php for it to be fully registered.
Custom views mainly live in the
index.js file. Think of them as their own little Vue application.
If you've never worked with Vue before, you should really check out their docs.
The template code of your custom view can make use of all our components from our Panel UI Kit. No need to re-invent the wheel for custom elements like buttons, dialogs and so much more.
Your plugin will be available at
||Vue component definition for the view|
||Set icon to use in UI. Choose from these.|
||Whether to show custom view in Panel menu|
||Label for menu item in Panel menu|
If you need additional styling for your view, you can create an
index.css and add your CSS there.
You can override Kirby's default panel views by replacing the view components with your own Vue component.
You can replace the following components:
k-login-view(better use the Panel login extension)
The Panel views are often very complex. If you want to replace them without loosing features, check out the orginal source code for each component. You can find them on GitHub.
Check out the following cookbook recipe to learn more: