Level 53
@brjohnson4 You should be able to use a Vue plugin just as you would with any Laravel app. Remember, you have to require the plugin before the Vue instance is created. You are declaring it after.
Dec 29, 2016
6
Level 5
Spark and Vue Plugins
How do I install and use a Vue Plugin with Spark?
More specifically, I'm trying to use the vue-clipboard plugin found here: https://github.com/xiaokaike/vue-clipboard
I have done "npm install vue-clipboard" in my terminal window. My app.js file looks like this:
require('spark-bootstrap');
require('./components/bootstrap');
var app = new Vue({
mixins: [require('spark')]
});
var VueClipboard = require('vue-clipboard');
Vue.use(VueClipboard);
Then I have a vue component like this:
Vue.component('copy-to-clipboard', {
data: function() {
return {
copyData: 'copy data'
}
},
template: '<button v-clipboard:copy="copyData">Copy</button>'
});
And then I have <copy-to-clipboard></copy-to-clipboard> in my view. But I get an error message: Failed to resolve directive: clipboard (found in component <copy-to-clipboard>)
What am I doing wrong? Thanks!
Level 5
Thanks, I guess I would need some help using Vue plugins with any Laravel app then. When I require the plugin before the Vue instance in app.js, I get two Uncaught TypeErrors: "Cannot read property 'bind' of undefined" and "Cannot read property '_updateFromParent' of undefined"
require('spark-bootstrap');
require('./components/bootstrap');
var VueClipboard = require('vue-clipboard');
Vue.use(VueClipboard);
var app = new Vue({
mixins: [require('spark')]
});
I'm not sure I'm doing this right.
Level 53
Where do you get those errors? I don't think they are from integrating the plugin.
Ok, I see the issue after looking at the code for the plugin. This plugin uses deprecated code so it is for Vue 1.0 and not 2.0.
Level 5
The first one comes from the vue-clipboard.js file, the other from vue.js, but only when I try to incorporate v-clipboard:copy into a component. Without the component, things seem to run fine.
Level 53
@brjohnson4 It is not going to work if you are using Vue 2.0 unless you modify the plugin.
Level 5
Okay, that was one possibility I was afraid of. Thanks.
Please or to participate in this conversation.