[Vuejs]-Writing file with electron/vue is not working

by

0👍

The scripts running in web contexts don’t have access to node or electron
functionality by default as a security precaution. It’s hard to find good
samples for the current version, there are too many outdated or non-working
samples out there. I have a sample repo where I communicate with the main thread to show an open file dialog and display the selected name and contents if you’re interested.

The current way (Vue3, electron13) looks to be using context isolation, creating
a preload script that runs in the render thread and has access to node and electron functionality.

1. Add configuration to vue.config.js

This adds a src/preload.js script as a preload script to pluginOptions.electronBuilder.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      preload: 'src/preload.js'
    }
  }
});

2. Setup our plugin script in background.js

When creating the window, add the preload script:

  // Create the browser window.
  const win = new BrowserWindow({
    width: 1920,
    height: 1080,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      enableRemoteModule: false,
      preload: path.join(__dirname, 'preload.js') // add preload script
    }
  })

3. Add src/preload.js script

In this script we have more privileges and can use node functionality like ‘fs’. We can expose our own api to the web scripts:

import { contextBridge } from 'electron'
import fs from 'fs'

contextBridge.exposeInMainWorld('file', {
  save: (filePath, text) => {
    fs.writeFileSync(filePath, text, { encoding: 'utf-8' });
  }
});

4. Use window.file.save() in your code

try {
  window.file.save('myfile.txt', 'the text to write to the file');
} catch (e) {
  alert(`Failed to save the file ${e}!`);
}

Leave a comment