# Asynchronous plugin panel view registration?

**URL:** <https://forum.getkirby.com/t/asynchronous-plugin-panel-view-registration/13272>\
**Category:** Questions\
**Tags:** v3\
**Created:** [March 8, 2019, 4:04pm UTC](https://forum.getkirby.com/t/asynchronous-plugin-panel-view-registration/13272 "2019-03-08T16:04:06Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![hdodov](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/hdodov/32/8171_2.png) [@hdodov](https://forum.getkirby.com/u/hdodov)\
**Post date:** [March 8, 2019, 4:04pm UTC](https://forum.getkirby.com/t/asynchronous-plugin-panel-view-registration/13272/1 "2019-03-08T16:04:06Z")

</div>

I’m making a plugin that creates a panel view. Since [I can’t easily pass data to the plugin’s front end](https://forum.getkirby.com/t/how-to-pass-data-to-panel-plugins-front-end/13252), I have to fetch the necessary data and _then_ initialize the plugin. However, nothing happens. I get a blank panel page. Here’s what I do:

```auto
import axios from 'axios'
import App from './App.vue'

axios({
  url: panel.api + '/myplugin/data',
  headers: {
    'X-CSRF': panel.csrf
  }
}).then(response => {
  window.mydata = response.data

  panel.plugin('hdodov/myplugin', {
    views: {
      myplugin: {
        label: 'MyPlugin',
        component: App
      }
    }
  })
})

```

Same happens even if I simply put the plugin registration in a `setTimeout`:

```auto
import axios from 'axios'
import App from './App.vue'

setTimeout(() => {
  panel.plugin('hdodov/myplugin', {
    views: {
      myplugin: {
        label: 'MyPlugin',
        component: App
      }
    }
  })
}, 200)

```

If I move the registration out of the timeout, the panel loads, the plugin loads, and everything works as expected. Why am I unable to register the plugin asynchronously?

How do I initialize my plugin only after the necessary data for it is available?

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [March 8, 2019, 7:18pm UTC](https://forum.getkirby.com/t/asynchronous-plugin-panel-view-registration/13272/2 "2019-03-08T19:18:10Z")

</div>

> [@hdodov](#):
>
> How do I initialize my plugin only after the necessary data for it is available?

Why exactly do you need to do this?  
I would register the view component directly and in the component, start the API call in Vue’s `created()` method.

---

<div class="post-metadata">

**Author:** ![hdodov](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/hdodov/32/8171_2.png) [@hdodov](https://forum.getkirby.com/u/hdodov)\
**Post date:** [March 11, 2019, 10:28am UTC](https://forum.getkirby.com/t/asynchronous-plugin-panel-view-registration/13272/3 "2019-03-11T10:28:45Z")

</div>

Yep, that’s what I would do too. But I have a Vuex store attached to my root component and its state depends on the initial data. If I initialize the store state after it’s created, I get a bunch of errors from its getters. Therefore, I wanted to initialize the whole plugin app after that data is present.

The real question is why can’t Kirby handle the plugin being initialized asynchronously. 🤔

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [March 11, 2019, 10:45am UTC](https://forum.getkirby.com/t/asynchronous-plugin-panel-view-registration/13272/4 "2019-03-11T10:45:00Z")

</div>

I remember once an issue about no semicolon at line ends (since Kirbz merges plugin JS files). Just to rule that out, could you try it with

```auto
axios({
...
});

```

---

<div class="post-metadata">

**Author:** ![hdodov](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/hdodov/32/8171_2.png) [@hdodov](https://forum.getkirby.com/u/hdodov)\
**Post date:** [March 11, 2019, 11:35am UTC](https://forum.getkirby.com/t/asynchronous-plugin-panel-view-registration/13272/5 "2019-03-11T11:35:35Z")

</div>

Nope, doesn’t fix it. I just tested with the following:

```auto
import axios from 'axios'
import App from './App.vue'

axios({
  url: panel.api + '/memsource/langs',
  headers: {
    'X-CSRF': panel.csrf
  }
}).then(response => {
  window.memsource = response.data

  var result = panel.plugin('oblik/memsource', {
    views: {
      memsource: {
        label: 'Memsource',
        icon: 'globe',
        component: App
      }
    }
  })

  console.log(result)
  console.log(window.memsource)
});

```

The request is successful and the first log returns `undefined`, while the second one returns the expected data.

If I move the `panel.plugin()` call outside the promise, the plugin is registered as usual.

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [March 11, 2019, 12:05pm UTC](https://forum.getkirby.com/t/asynchronous-plugin-panel-view-registration/13272/6 "2019-03-11T12:05:46Z")

</div>

Ok, I think i probably know what happens:  
`panel.plugin()` basically only does some transformations and then stores all of it to an object in `window.panel`. Once the Panel gets loaded, it looks for this objects and actually registers the components etc. in its Vue instance (this way we can bridge between the Panel’s Vue isntance and plugins).

Now your call probably takes so long (not saying that its slow, just longer than the rest of the code), that the Panel has already checked and registered everything before your plugin calls `panel.plugin()`.

I don’t see an easy way around this at the moment.

---

<div class="post-metadata">

**Author:** ![krisa](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/krisa/32/3415_2.png) [@krisa](https://forum.getkirby.com/u/krisa)\
**Post date:** [April 20, 2021, 12:34pm UTC](https://forum.getkirby.com/t/asynchronous-plugin-panel-view-registration/13272/7 "2021-04-20T12:34:29Z")

</div>

Same problem here.

I am trying to make plugin that would generate panel views.

index.js

```auto
fetch("/api/iframeview", {
	headers: {
		'x-csrf': panel.csrf
	}
}).then(res => res.json())
.then(data => {
	let viewGroup = {};
	Object.entries(data.views).forEach(entry => {
		viewGroup[entry[0]] = createIframeView(entry[0], entry[1]);
	});
	panel.plugin("floriankarsten/iframeview", {
		views: viewGroup
        });
})
.catch(error => console.log(error));

function createIframeView(id, view) {
	return {
		label: view.label,
		icon: view.icon,
		component: {
			template: `
			<k-view class="k-iframeview-view">
				<h1>label: ${view.label}</h1>
			</k-view>`,
		},
	}
}

```

Those panel views are never created. The code works if i move it out of the promise but yeah that doesn’t help me.  
Is there any other way register panel plugins dynamicaly or pass them data upfront?