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

Kirby 3 Solved ✅
1

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:

error
error1359×716 39.8 KB

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

Thank you!

2

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

3

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).

4

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.

5

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

6

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, {});
},
…
1 Like
7

Hello,
I had the same issue. Your last solution works perfectly. Either within beforeCreate() or created().

However, digging a bit further, I found an undocumented feature that should do the same thing.
Same as your sample, register plugin with :

…
use: {
    PluginName
},
…
1 Like