Can I use Vue.use() inside my plugin?

Hi!

Unfortunately I have a problem with my own view (Kirby Vue Plugin), which I am currently working on. I need an external Vue plugin and want to add it to my component. According to the plugin instructions, this must be done as follows:

import VueBarcodeScanner from 'vue-barcode-scanner'
// inject vue barcode scanner
Vue.use(VueBarcodeScanner)

When I try to add this to my component code, I always get a blank page:

import SlideUpDown from 'vue-slide-up-down'
import jsondiffpatch from 'jsondiffpatch'
import VueBarcodeScanner from 'vue-barcode-scanner'

Vue.use(VueBarcodeScanner)

export default
{
	components: {
		'slide-up-down': SlideUpDown
	},
	data()
	{
       ……

This is my console and browser response:

Does anyone have an idea how to register the plugin in my Kirby component?

Thank you!

Doesn’t it work without the Vue.use statement?

Hmm no, unfortunately not :frowning:

undefined is not an object (evaluating 'this.$barcodeScanner.init')

I also tried it with VueBarcodeScanner.init(...), without success. First I though it has something to do with the plugin itself. But is seems to work outside of Kirby and if I try to import other plugins with Vue.use they also don’t work (and without Vue.use).

Hm, then we have to wait for someone more familiar with this or you check out how other plugins do it that import third party code.

Thanks for your help! :slight_smile:

Unfortunately all the Kirby plugins I’ve seen so far are just using external components, but none external plugins or external directives. But I hope I can find any working example… :S

Okay… After a few hours figuring out how I can get this to work, I finally found a solution! Just in case somebody somebody else has the same problem:

Just register your plugins like this:

…
beforeCreate()
{
	// Instead of: Vue.use(PluginName)
	window.panel.app.$root.constructor.use(PluginName, {});
},
…