How to pass data to panel plugin's front end?

plugin

#1

In Kirby 2, I was able to pass any data I wished to the front end of the panel with something like:

<script>
window.MyData = <?= kirby()->something() ?>;
</script>

and in my front end script, I would do:

console.log(window.MyData)

So how would I do something similar in K3? I thought of creating a route that outputs the data I needed and fetching it in the front end with AJAX, but that seems like a huge overkill.


Asynchronous plugin panel view registration?
#2

Try:

<?= $kirby->something() ?>

But what is something()? Can it be anything? But i’m not sure why the first one didn’t work for you.


#3

I put something() as a placeholder. It can be any data.

I can’t use what you’ve proposed because I need the data at the front end of my plugin. The plugin uses a panel view. I need to pass some data to this panel view from the server. I.E. I need to pass server data to the Vue component.


#4

The panel is a pure Vue app. Instead of passing data you could fetch it in the views js part.


#5

I see. I agree with you, but it would be pretty inefficient to fetch a single static value with AJAX. If you look at the source of the rendered panel page, you see:

<script>window.panel = {"url":"http://localhost/ikarov/panel","site":"http://localhost/ikarov","api":"http://localhost/ikarov/api","csrf":"9e1534bfa938023d64360efbfedb4ed29fa2bf7e1d41b71efc5d96d66c34d964","translation":"en","debug":true,"search":{"limit":10}}</script>

<script src="http://localhost/ikarov/media/panel/3d4b11f6ee2a89fd5ace87c910cee04b/js/plugins.js" defer></script>
<script src="http://localhost/ikarov/media/panel/3d4b11f6ee2a89fd5ace87c910cee04b/js/vendor.js" defer></script>
<script src="http://localhost/ikarov/media/plugins/index.js" defer></script>
<script src="http://localhost/ikarov/media/panel/3d4b11f6ee2a89fd5ace87c910cee04b/js/app.js" defer></script>

So the panel already uses this method to provide server data to the Vue app. Perhaps a feature could be implemented that allows you to add your own <script> tag. Or perhaps some key in the Kirby::plugin definition of the plugin where you can specify some values to be included in window.panel up top.


Kirby::plugin setting for passing data to the panel Vue front end