vue + electron how to write a file to disk - vue.js

I'm building a desktop app using Vue and Electron. I want to save a file from a vue component with some data introduced by the user. For doing that, I tried used fs node module inside an vuex action, but it got me error. Can't found that module. I know Vue is client side, but, I thought that at the moment of using with Electron it could work, but it does't. To init my app I used vue-cli and the command vue init webpack electron-vue.
I'm using vuex system and using vuex modules too, I've an actions.js file where I tried to use the fs module:
// import * as fs from 'fs'; I used this way at first
const fs = require('fs');
export const writeToFile = ({commit}) => {
fs.writeFileSync('/path/file.json', JSON.stringify(someObjectHere));
};
When I call this action from a Vue component, ex, Options.vue, I use the vuex dispatch system, and, in the created() method of that component:
this.$store.dispatch('writeToFile')
That's raised me the error above mentioned

to use File System in electron with Vue and WebPack, the file system instance has to be declared in the dist/index.html after execute the command "npm run build"
<script>
var fs = require('fs');
</script>
and in the vue component, it 's used fs like if it would have been declared in the vue file.
...
export const writeToFile = ({commit}) => {
fs.writeFileSync('/path/file.json', SON.stringify(someObjectHere))
};
...
while if not use it in electron or you write it in the index to dev, it throws an error.

Using window.require will help. This is the <script></script> part of the "App.vue" file:
import HelloWorld from './components/HelloWorld'
function writeToFileSync(filepath, content) {
if (window && window.require) {
const fs = window.require('fs')
fs.writeFileSync(filepath, content)
}
}
writeToFileSync('/usr/local/worktable/sandbox/msg.txt', 'Hello\nworld')
export default {
name: 'App',
components: {
HelloWorld
},
data: () => ({
//
})
}
The code above is test on:
macOS 10.15
Electron 11 (with nodeIntegration set to true)
Vue 2.6.11 (generated by vue create)

Related

Importing a Vue library in nuxt.js via plugins

Any idea how I'm going to use this plugin? https://github.com/DimanVorosh/vue-json-rpc-websocket/blob/e2199d89dc15f50e57e7c5c70adfd95e5ceb5cda/src/wsMain.js
I see that it is auto registering with vue but I can't use it in nuxt.
I created the plugins/vue-json-rpc-websocket.client.js, registered in nuxt.config.js as
'~/plugins/vue-json-rpc-websocket.client.js'
but I have no idea what to write in the inject method and IF I have to do it to make it work. this.$socket is undefined in component.
import Vue from 'vue'
import JRPCWS from 'vue-json-rpc-websocket'
Vue.use(JRPCWS, 'wss://bsc-ws-node.nariox.org:443', {
reconnectEnabled: true,
reconnectInterval: 5000,
reconnectAttempts: 3
})
// do I need this?
export default ({ app }, inject) => {
// Inject $hello(msg) in Vue, context and store.
// inject('hello', msg => console.log(`Hello ${msg}!`))
}
also, any idea how can I ENV the 'wss://bsc-ws-node.nariox.org:443' string?
Totally working on my side with the package that you're using and your given configuration. No need to inject anything so far!
Here is a fresh repo created for the example: https://github.com/kissu/so-nuxt-json-rpc-websocket
The below screenshot is using a console.log(this.$socket) in a mounted hook in /pages/index.vue but you can also use $vm0 and access the instance directly from the devtools after selecting the root component (in the screenshot too).
For the env variables part, you can create an .env file at the root of your directory like this
WS_URL="wss://echo.websocket.org"
// nuxt.config.js
export default {
publicRuntimeConfig: {
wsUrl: process.env.WS_URL,
},
}
Then, use this variable in your plugin like this
import Vue from 'vue'
import JRPCWS from 'vue-json-rpc-websocket'
export default ({ $config: { wsUrl } }) => {
Vue.use(JRPCWS, wsUrl, {
reconnectEnabled: true,
reconnectInterval: 5000,
reconnectAttempts: 3
})
}

How to integrate inertiaJS with quasar framework?

I would like to integrate intertiaJS into my Quasar app so that I can communicate with my Laravel backend. My problem now is that the general stuff is taken over by the Quasar CLI, which is good in principle, but in this case it takes away my entry point as described at https://inertiajs.com/client-side-setup:
import { createApp, h } from 'vue'
import { App, plugin } from '#inertiajs/inertia-vue3'
const el = document.getElementById('app')
createApp({
render: () => h(App, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: name => require(`./Pages/${name}`).default,
})
}).use(plugin).mount(el)
My thought is that I could use a boot file like the offered in Quasar (https://quasar.dev/quasar-cli/boot-files), but I have to admit that I don't have the right approach.
When I look at the app.js that is automatically generated, I see that nothing special happens in the rendering:
/**
* THIS FILE IS GENERATED AUTOMATICALLY.
* DO NOT EDIT.
*
* You are probably looking on adding startup/initialization code.
* Use "quasar new boot <name>" and add it there.
* One boot file per concern. Then reference the file(s) in quasar.conf.js > boot:
* boot: ['file', ...] // do not add ".js" extension to it.
*
* Boot files are your "main.js"
**/
import Vue from 'vue'
import './import-quasar.js'
import App from 'app/src/App.vue'
import createStore from 'app/src/store/index'
import createRouter from 'app/src/router/index'
export default async function () {
// create store and router instances
const store = typeof createStore === 'function'
? await createStore({Vue})
: createStore
const router = typeof createRouter === 'function'
? await createRouter({Vue, store})
: createRouter
// make router instance available in store
store.$router = router
// Create the app instantiation Object.
// Here we inject the router, store to all child components,
// making them available everywhere as `this.$router` and `this.$store`.
const app = {
router,
store,
render: h => h(App)
}
app.el = '#q-app'
// expose the app, the router and the store.
// note we are not mounting the app here, since bootstrapping will be
// different depending on whether we are in a browser or on the server.
return {
app,
store,
router
}
}
I.e. in principle I should be able to link in without it causing any conflict situations. The question is, how would that look?
I have to link into the rendering afterwards and overwrite it as described in the code example. I would like to stay with the Quasar Cli, because it is very useful and the situation described here is the only exception.
p7
the boot files is the right place to inject and initialize your own dependencies or just configure some startup code for your application.
I have not had the opportunity to use the library you mention, but I detail a little how you could implement
create your boot file
import { plugin } from '#inertiajs/inertia-vue';
export default async({ app, Vue }) => {
Vue.use(plugin);
}
until there you have 50%. On the other hand, you cannot do a mixin to the main instance but you could do it for each page, however I recommend that you make a component part to which you add the data you need and make a mixin of the library you need
<template>
<div />
</template>
<script>
import { App } from '#inertiajs/inertia-vue';
export default {
mixins: [App],
props: ['initialPage', 'resolveComponent'],
}
</script>
In order to do this, modify according to how the library you use works.

Vue2 how export multiple components as library that use Vuex?

i'm trying to export a Vue.js 2 project as a library containing multiple components.
Using this as example I managed to export a single component.
In my "library" project, I've exported in the main.js:
import TestButton from "#/components/TestButton";
import store from "#/store";
export default {
install(Vue, options) {
if (!options || !options.store) {
throw new Error("Please initialise plugin with a Vuex store.");
}
options.store.registerModule("testLibrary", store);
Vue.component("test-button", TestButton);
}
};
I build it via vue-cli-service build --target lib --name testlib src/main.js
Published on npm via npm publish --access-public
And then imported in another Vue 2 project.
Here in the main.js I've:
[...]
new Vue({
store,
render: (h) => h(App),
}).$mount("#app");
import TestButton from "my-test-library";
Vue.use(TestButton, { store });
And then I can successfully use <test-button></test-button> in whatever component I need, while the Vuex Store has a working "testLibrary" module.
Now the question is how I can export multiple components in the first app and import in the second one.
I've found many example about, such as this one, however I can't get it working.
For example, in the library app I'm trying
import TestButton from "#/components/TestButton";
import AnotherComponent "#/components/AnotherComponent";
import store from "#/store";
export default {
install(Vue, options) {
if (!options || !options.store) {
throw new Error("Please initialise plugin with a Vuex store.");
}
options.store.registerModule("testLibrary", store);
Vue.component("test-button", TestButton);
Vue.component("another-component", AnotherComponent);
}
};
While in the second app I'm trying something like
[...]
import { TestButton, AnotherComponent } from "my-test-library";
But whatever syntax I try it seems like the second app goes in a loop while building and don't work.
Any idea how is this done?

Vue 3 external component/plugin loading in runtime

I am designing an architecture for the Vue 3 app with distributed module-based ownership. Module system will be represented with plugins (seems like the most appropriate solution allowing vuex module and vue-router dynamic injects). Each such module/plugin will be developed by dedicated team working within isolated repos. We cannot use npm package-per-plugin approach as deployment process should be isolated as well, and with npm approach core app team will have to rebuild app each time npm package plugin has updates. This means we will have to load such plugins/pages at runtime via http.
So far this approach by Markus Oberlehner seems like some sort of the way to go - it uses custom Promise based solution for webpack's missing "load external url script at runtime" functionality. While it works fine with Vue 2, Vue 3 gives VNode type: undefined error.
The above mentioned article offers the following webpack external component loading solution:
// src/utils/external-component.js
export default async function externalComponent(url) {
const name = url.split('/').reverse()[0].match(/^(.*?)\.umd/)[1];
if (window[name]) return window[name];
window[name] = new Promise((resolve, reject) => {
const script = document.createElement('script');
script.async = true;
script.addEventListener('load', () => {
resolve(window[name]);
});
script.addEventListener('error', () => {
reject(new Error(`Error loading ${url}`));
});
script.src = url;
document.head.appendChild(script);
});
return window[name];
}
But above, as I said, does not work with Vue 3 defineAsyncComponent mechanism.
// 2.x version WORKS
const oldAsyncComponent = () => externalComponent('http://some-external-script-url.js')
// 3.x version DOES NOT WORK
const asyncComponent = defineAsyncComponent(
() => externalComponent('http://some-external-script-url.js')
)
So I have two questions:
Are there any known better solutions/suggestions for above architectural specification?
Is there any working webpack dynamic external import solutions tested with Vue 3 out there?
UPD: Here is small reproduction repo
We solved this problem together via chat.
Components built via the Vue 3 vue-cli rely on Vue being available in the global scope. So in order to render components loaded via the technique described in my article, you need to set window.Vue to a reference to Vue itself. Then everything works as expected.
update:
If import vue from vue/dist/vue.esm-bundler and set to global, then no need to change webpack / Vite config, and no need to load vue from cdn.
import * as Vue from 'vue/dist/vue.esm-bundler';
window.Vue = Vue;
Besides setting window.Vue, some other webpack or Vite configuration should also be set, otherwise some error is presented in console: vue warn invalid vnode type symbol(static) (symbol)
Vue3 + webpack:(https://github.com/vuejs/vue-next/issues/2913#issuecomment-753716888)
// index.html:
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.4"></script>
// vue.config.js
configureWebpack: config => {
...
config.externals = { vue: 'Vue' }
...
}
Vue3 + vite:(https://github.com/crcong/vite-plugin-externals)
// vite.config.js
import { viteExternalsPlugin } from 'vite-plugin-externals'
export default {
plugins: [
viteExternalsPlugin({
vue: 'Vue'
}),
]
}

vuejs with electron, can't use fs

I'm using Vue with it's Electron plugin and I want to use fs to read directories, but it gives me this error. What could be the problem?
TypeError: Object(...) is not a function
import Vue from 'vue';
import Component from 'vue-class-component';
import { readdir } from 'fs';
#Component
export default class Directory {
mounted() {
readdir('C:/', (err, files) => {
if (err) console.log(err);
console.log(files)
})
}
}
I only worked with Angular+Electron combo, but with that I used electron's main process to do file manipulation stuff.
Further read: https://www.electronjs.org/docs/api/ipc-main
In the main process, you can access "fs" easily like you would in node.
I don't know if this is the case with Vue, but maybe this helps.