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!
Related
I used Vue 2.6.14 in my electron app, calling it from main JavaScript script like this:
import Wookmark from 'wookmark/wookmark';
import Vue from 'vue'; // <-- HERE
import {Language} from './model/language';
import Header from '../vue/header.vue';
import VueContextMenu from "vue-context-menu";
import bsn from "bootstrap.native";
Before electron 19.1.5 it worked well, but after electron 20.0.0, this code does not worked.
The code stopped around import Vue from 'vue'; with error Uncaught (in promise) Error: module not found: ./maplist (NOTE: maplist is the name of this script).
What is this breaking change between electron 19 and 20?
How can I avoid it?
Conditions:
electron: 19.1.5 and 20.0.0
Vue: 2.6.14
electron-builder: 23.6.0
vue-loader: 15.9.8
vue-template-compiler: 2.6.14
vue-context-menu: 2.0.6
I don't use any "vue-electron"-ish solutions.
======
Additional info:
With checking this page, I found workaround that adding sandbox: false setting in my main.js
mainWindow = new BrowserWindow({
width: appWidth,
height: appHeight,
webPreferences: {
preload: path.join(__dirname, '../../frontend/api/preload.js'), // eslint-disable-line no-undef
sandbox: false // <- This
}
});
But the defult value of sandbox is true, I believe it is by security reason, so I want to know how to call vue with default sandbox setting, to keep security.
I have a project in Nuxt.js and I am trying to test it using Vue Test Util which works effectively except on files where I use BootstrapVue custom html elements.
When I run npm test this error displays for every BootsrapVue html element.
console.error
[Vue warn]: Unknown custom element: <b-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Anonymous>
<Root>
How can I prevent this?
You need to setup bootstrap-vue in your Jest enviroment, using a Jest setup file.
Create the setup file:
// #/jest-setup.js
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Then configure Jest's setupFiles to load it:
// #/jest.config.js
module.exports = {
setupFiles: ['./jest-setup.js'],
}
How do we import js file from cdn?
I am building a custom component (a wrapper component) to view the pdf files. and for this I need to use pdf.js file from cdn and I am unable to import the file?
following does not work
import "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js";
To import the JS file from CDN and use in vue.js component, you can use mounted lifecycle and there you need to append your script into DOM.
Then it will be available into your window global variable.
Working code example:
mounted () {
let pdfJS = document.createElement('script')
pdfJS.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js')
document.head.appendChild(pdfJS)
// for checking whether it's loaded in windows are not, I am calling the below function.
this.checkPDFJSLib()
},
methods: {
checkPDFJSLib() {
console.log(window.pdfjsLib)
}
}
You can normally include it in your index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js"></script>
Alternatively, you can use an npm library e.g vue-pdf
install it into your modules
npm install --save vue-pdf
and use it
import pdf from 'vue-pdf'
I am trying to setup nuxtjs app with vue2-editor.if I try navigating to editor page via client navigation its loading but if i visit or refresh(eg.com/editor) page directly .i am getting document not defined error.
I have identified it because vue2 editor does not support ssr but i have disable it in nuxt-config.js for only client side.but error not going away.please share what i am doing wrong?
//plugin.quill-editor.js
import Vue from 'vue'
if (process.client) {
const VueEditor = require('vue2-editor') //tried normal import as wel
Vue.use(VueEditor)
}
//nuxt.config.js
plugins: [
{ src: '#plugins/quill-editor.js', mode: 'client' },
]
let VueEditor
if (process.client) {
VueEditor = require('vue2-editor').VueEditor
}
not doing anything in nuxt config or any plugin.
only import method changed.
its working now but i am still wondering why it is not working when i disable ssr in nuxt -config.js file
I solved this issue by adding
ssr: false
in nuxt.config.js because vue2 doesn't support server-side rendering
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)