I'm using https://github.com/zhuowenli/vue-clipboards. But when i tried this it doesn't work. I'm new to vue and nuxt js. and there is an error on the console that says [Vue warn]: Failed to resolve directive: clipboard. BTW i have already installed clipboard.
Template
<button v-clipboard='message'>Copy</button>
Script
import VueClipboards from 'vue-clipboards'
export default {
components: { VueClipboards },
data () {
return {
message: 'asdad'
}
}
}
This same issue is mentioned here:
https://github.com/Inndy/vue-clipboard2/issues/4
You can solve it adding the component in the main.js file. By doing that, you are making it global.
https://vuejsfeed.com/blog/copy-texts-to-clipboard-using-vue-clipboard2
Best regards
I got the same error here
Resolved it by
import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);
You have to import Vue & use it
import Vue from 'vue'
import vueClipboards from 'vue-clipboards'
Vue.use(vueClipboards)
...
Don't forget to remove the components: { VueClipboards },
import vueClipboards from 'vue-clipboards'
Vue.use(vueClipboards)
Import it to the main component and it works for me!!
Even before importing it to the current component I removed the "components: { VueClipboards }" but still it was not working. I just imported it to component instead of importing it to the Main.js file.
Related
I am using the Vue CLI Plugin Electron Builder and whenever I try to include electron ipcRenderer inside of my Vue component using
import ipcRenderer from 'electron'
I get this error
Module not found: Error: Can't resolve 'path' in '/Users/myname/IdeaProjects/project/node_modules/electron'
How would i fix this?
I eventually solved this by adding this to my vue.config.js
electronBuilder: {
preload: 'src/preload.js'
}
Then in my browser window I could load a preloader like normal.
Next in my preload i added this
import { ipcRenderer } from 'electron'
window.ipcRenderer = ipcRenderer
Now I can use window.ipcRenderer in the renderer!
I try using vuex with Vue3 and Vite. After installing it with yarn like yarn add vuex#next --save
I get the error:
The requested module '/vite-dev/#fs/home/app/node_modules/.vite/vuex.js?v=f336efac' does not provide an export named 'createStore'
Any idea how to solve this?
EDIT:
store.js
import { createStore } from 'vuex'
...
const store = createStore({
plugins: [createPersistedState()],
state() {
return {...},
main.js - just importing store file
import { store } from "./store.js";
I got it solved by deleting node_modules and re-installing the dependencies. Not sure why that solved it tho.
global.js
import Vue from 'vue'
// javascript import for when you're importing the css directly in your javascript
import "vue-navigation-bar/dist/vue-navigation-bar.css";
// import the library
import VueNavigationBar from "vue-navigation-bar";
Vue.component("vue-navigation-bar", VueNavigationBar);
nuxt.config.js
plugins: [
{ src: '~/plugins/global.js', ssr: false }
],
Error
window is not defined
I have tried all the possible solutions in nuxtjs documentation still getting same error.
Thanks!
The solution is to wrap it in <client-only>
<template>
<client-only>
<vue-navigation-bar :options="navbarOptions" />
</client-only>
</template>
I'm trying to integrate a Datatable plugin (https://www.npmjs.com/package/vuejs-datatable) in my Vue application and I'm getting an error in my console.
Uncaught TypeError: Cannot read property 'use' of undefined
at eval (vuejs-datatable.js?b015:1)
at Object.eval (vuejs-datatable.js?b015:1)
at eval (vuejs-datatable.js:4)
at Object../node_modules/vuejs-datatable/dist/vuejs-datatable.js (app.js:10170)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
at eval (selector.js?type=script&index=0!./src/views/tables/data-table.vue:2)
at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/tables/data-table.vue (app.js:1438)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
My dataTable.vue file:
<template lang="html">
<section class="data-table">
<datatable :columns="columns" :data="rows"></datatable>
</section>
</template>
<script lang="js">
import Vue from 'vue'
import DatatableFactory from 'vuejs-datatable'
export default {
name: 'DatatablePage'
}
Vue.use(DatatableFactory)
</script>
And whenever i try to use 'Vue.use(PluginName)' when integrating a plugin, i get the similar error. I'm new to VueJS. Is there anything i need to do ?
You need to add plugin before your main Vue instance is initialized; See using vue plugins here, which says:
Use plugins by calling the Vue.use() global method. This has to be
done before you start your app by calling new Vue().
For your case, move
import Vue from 'vue'
Vue.use(DatatableFactory)
to your main.js, so it looks like:
import Vue from 'vue'
Vue.use(DatatableFactory)
// some other code
new Vue({
...
})
Adding the following in weback.config.js seemed to do the trick:
module.exports = {
resolve: {
alias: {
...
'vuejs-datatable': 'vuejs-datatable/dist/vuejs-datatable.esm.js',
...
}
},
}
Based on discussion here:
https://github.com/pstephan1187/vue-datatable/issues/50
I faced the same error in my vue-app.
import Vue from 'vue';
import VueRouter from 'vue-router';
...some more imports here....
Vue.use(VueRouter);
...
The error was cannot read property 'use' of undefined. Which means, it had a problem with reading Vue. I checked my package.json and package-lock.json (for whether I installed in my local). Everything seemed ok. I had both Vue and Vue-router.
Deleting node_modules and re-installing worked for me.
Trying to get the Dragabilly Vue plugin to work with my Nuxt app: https://www.npmjs.com/package/vue-draggabilly
I've used the usual approach that has worked with similar plugins but I don't have the depth of knowledge to crack this one. I am adding into my nuxt config file:
plugins: [ { src: '~/plugins/vue-draggabilly.js', ssr: false } ]
That file includes this code:
import Vue from 'vue'
import VueDraggabilly from 'vue-draggabilly'
Vue.use(VueDraggabilly)
However, I get the following error and I'm not able to use:
vue-draggabilly.js:3 Uncaught ReferenceError: exports is not defined
This refers to this line in the plugin:
exports.install = function (Vue, options) { ....
It is a usual vuew plugin package, but I'm not sure how to get it to work with nuxt. Any help very greatly appreciated!
I see a warning:
warning in ./plugins/vue-draggabilly.js
4:8-22 "export 'default' (imported as 'VueDraggabilly') was not found in 'vue-draggabilly'
I don't know the best answer, but this seems to work:
import Vue from 'vue'
import * as VueDraggabilly from 'vue-draggabilly'
Vue.use(VueDraggabilly)