Vue-cli-plugin-electron-builder: Can't access "electron" through the renderer process

[avi12]

I tried creating a project using:

vue create electron-test
cd electron-test
vue add electron-builder
(selecting ^9.0.0)

Then, in the App.vue:

import HelloWorld from './components/HelloWorld.vue';
import { shell } from "electron";

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      shell
    };
  }
};

However, Chrome DevTools is showing:

I know this is a bug in the plugin since I followed the quick start tutorial, during which I used Electron 10, and I successfully imported shell in the renderer process.

[yooouuri]

Add

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
}

to your vue.config.js, see: https://github.com/electron/electron/issues/24005#issuecomment-643705734

[avi12]

That surprisingly worked, thanks!
Turns out I only needed this snippet.
I could still do

import { shell } from "electron";