Custom Panel views: support breadcrumbs and `vue-router` usage

[hdodov]

I'm creating a fairly complicated plugin for K3. It has breadcrumbs for view navigation. However, I had an idea - why create my makeshift router and breadcrumbs if Kirby already has those?

To use breadcrumbs I would simply have to commit to the Kirby $store and update its breadcrumbs object. To create a router, I would simply need a reference to Kirby's router in my component:

export default {
  router: new window.VueRouter()
}

Basically it's a similar issue to my Vue and Vuex issue.

The plugin routes would simply use hashes:

http://localhost/kirby/panel/plugins/myplugin#/
http://localhost/kirby/panel/plugins/myplugin#/route
http://localhost/kirby/panel/plugins/myplugin#/another/route

Or perhaps you could set a panel route along the lines of:

/plugins/:plugin/*

that does nothing and leaves the plugin router to handle stuff. If that's possible, you wouldn't even need hash URLs.

---

Bottom line is - it would be very awesome if you could use the panel's breadcrumbs to navigate a plugin. You use them to navigate the rest of the panel, why not plugins? I don't know if exposing VueRouter would be enough, but one way or another - implementing this functionality would be useful, no doubt.

[distantnative]

I really want that too for my Retour plugin. And in general, we would like to offer more support for view plugins. Let's see what can be done for 3.2.

[bastianallgeier]

I agree with the router, but the breadcrumb is already accessible with a store action:

this.$store.dispatch("breadcrumb", []);

Pass an array of objects with a label and link value:

this.$store.dispatch("breadcrumb", [
  {label: "A", link: "/a"},
  {label: "B", link: "/a/b"}
]);

[hdodov]

Yeah, you can set the breadcrumb, but it isn't really usable. I mean, you can point it to a link and when the user clicks it... he navigates away from the plugin.

Perhaps you could add another property in the breadcrumb object like onClick or onOpen which is a callback and has priority over link. If it has an onOpen, it's a <button> with onclick listener, else if it has link, it's an <a> with href.

This way, if I'm making a plugin, I could do:

var handler = function (crumb) {
  if (crumb.value === 'componentA') {
    ...
  }
}

this.$store.dispatch("breadcrumb", [
  {label: "A", value: 'componentA', onOpen: handler},
  {label: "B", value: 'componentB', onOpen: handler}
]);

This way you could use breadcrumbs for whatever you wish and you're not even forced to use vue-router too. It can be overkill if you want some basic functionality anyways.

---

Another option is to provide link: null in your breadcrumbs and if the user clicks on such a crumb, the panel does nothing and instead emits an event which the plugins can listen to. You could add an event bus $events on the root Vue instance (the panel). The plugins would access it with this.$root.$events.

1. Plugin sets breadcrumb with link: null.
2. User opens crumb.
3. Panel emits with this.$events.$emit('crumb', details).
4. Plugin catches event with this.$root.$events.$on('crumb', handler).
5. Plugin does whatever it needs