Panel JS issues

The CMS Questions
1

I want to add custom JS to the panel. But the documentation is lacking, I think: panel | Kirby CMS

My simple console.log works now in the panel, but how do I work with Vue.js, outside of Vue.js?

There should be some basic examples and a list of available events, in my opinion.

The issues I have:

  • How do I wait on “document ready”, but in Vue space? I want to add an icon to an element, the first time the element is rendered.
  • How do I listen to Vue events? I want to add that icon to a structure row, after it is added later (click on the plus).
  • How to input data in a Vue field component with JS, for example the number field? So that Vue recognizes it and displays the save button.

Some documentation for Vue noobs would be much appreciated and I hope someone could help me with the listed issues.

2

Hi there,

  • To familiarise yourself with the Vue lifecycle, I think this is a good intro Understanding Vue.js Lifecycle Hooks | DigitalOcean - those also work on a per-component basis
  • “Vue events” is a very broad term here. Are you talking about events a specific component emits? Or some globale vents? If so, which specifically?
  • Via the value prop Number field | Kirby CMS for any number field component you are using in your own plugin template code. But since you mention showing the save button, it sounds like you are trying to alter the existing content states of the regular fields sections? For that I don’t quite understand your question/use case then.

We are aware that the Panel JS/UI kit docs are not optimal/complete.

3

Thank you for the answer. I will read your linked DigitalOcean article. Hopefully it will be clearer for me afterwards.

In case of Vue events I mean something like “on row added” in the structure field. But I had a look at the k-structure-form and k-structure-field docs now and found the submit event. But I have no idea if the element is already available at that time – maybe that is not an issue in Vue.

Point 3: I want to update a field value and save the page with the new value. Hope that makes sense?

4

And you want to react from outside of these components to events that happen inside the component?

For point 3: Store | Kirby CMS would be the way, though this is really advanced territory you’re moving into.

5

Correct.

It is an advanced feature I want to build. :slight_smile:

I have read the guide on Panel plugins: Plugin setup for Panel plugins | Kirby CMS
In the first paragraph, it says that it is possible to create plugins without a build process, but the guide doesn’t go into detail.

I would go this route if it would be possible without a build step, because all of the site should be easily editable by the client, without using Git, NPM or Composer.

6

I know, but at the same time you mention that you’re new to Vue and how the Panel and its components works. So it’s tricky to guide you with most of it being new, but then setting out to do something very advanced.

And it is true, you can do it without a build process. It limits you however to not use Vue’s Single File Components, but rather keep all the code in the index.js of your plugin and use Vue’s render/template functions.

7

Well, I found the documentation for a plugin without build step: Fields | Kirby CMS

Works great, if you know where to look. Maybe mention these docs in the guide.

Now I need to learn Vue.