Cannot load preload.js from clean project

[Barrosy]

Describe the bug
According to the Electron Builder documentation, it should be possible to include a preloader.js in order to utilize Node integration in the context of your Vue App. More explanation about Electron preloading can be found at Electron Documentation. When implementing mentioned solution to a clean installation of Vue.js and Electron Builder, I am unable to compile the application without errors occuring.

To Reproduce
Steps to reproduce the behavior:

Install Vue.js using vue create app with default settings. Install Electron builder using vue add electron-builder. Modify vue.config.js to contain:

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

Modify background.js to contain:

// Create the browser window.
  const win = new BrowserWindow({
    width: 1280,
    height: 720,
    webPreferences: {
      
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,

      //How to add a preloader?
      preload: path.join(__dirname, 'preload.js')//<-- This part was added
    }
  })

Expected behavior
A clear and concise description of what you expected to happen.

I expected the app to launch without any errors and/or warnings.

Screenshots
If applicable, add screenshots to help explain your problem.

I believe this would not be necessary.

Environment (please complete the following information):

• custom config for vcp-electron-builder:

Not sure what is meant by this.

• (if possible) link to your repo:

My repository could be found here: https://github.com/Barrosy/VueInElectron
However, does not contain changes related to preloader yet.

• terminal output from running vue info:

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.54)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.4.0
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.1.1
    @vue/babel-plugin-transform-vue-jsx:  1.4.0
    @vue/babel-preset-app:  5.0.8
    @vue/babel-preset-jsx:  1.4.0
    @vue/babel-sugar-composition-api-inject-h:  1.4.0
    @vue/babel-sugar-composition-api-render-instance:  1.4.0
    @vue/babel-sugar-functional-vue:  1.4.0
    @vue/babel-sugar-inject-h:  1.4.0
    @vue/babel-sugar-v-model:  1.4.0
    @vue/babel-sugar-v-on:  1.4.0
    @vue/cli-overlay:  5.0.8
    @vue/cli-plugin-babel: ~5.0.0 => 5.0.8
    @vue/cli-plugin-eslint: ~5.0.0 => 5.0.8
    @vue/cli-plugin-router:  5.0.8
    @vue/cli-plugin-vuex:  5.0.8
    @vue/cli-service: ~5.0.0 => 5.0.8
    @vue/cli-shared-utils:  5.0.8 (4.5.19)
    @vue/compiler-core:  3.2.45
    @vue/compiler-dom:  3.2.45
    @vue/compiler-sfc:  3.2.45
    @vue/compiler-ssr:  3.2.45
    @vue/component-compiler-utils:  3.3.0
    @vue/devtools-api:  6.4.5
    @vue/reactivity:  3.2.45
    @vue/reactivity-transform:  3.2.45
    @vue/runtime-core:  3.2.45
    @vue/runtime-dom:  3.2.45
    @vue/server-renderer:  3.2.45
    @vue/shared:  3.2.45
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^8.0.3 => 8.7.1
    vue: ^3.2.13 => 3.2.45
    vue-cli-plugin-electron-builder: ~2.1.1 => 2.1.1
    vue-eslint-parser:  8.3.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  17.0.1 (15.10.1)
    vue-router: ^4.1.6 => 4.1.6
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Additional context
Add any other context about the problem here.

Error output:

Launching Electron...
(node:12076) ExtensionLoadWarning: Warnings loading extension at C:\Users\username\AppData\Roaming\app\extensions\ljjemllljcmogpfapbkkighbhhppjdbg:
  Unrecognized manifest key 'browser_action'.                                                                                 
  Unrecognized manifest key 'update_url'.                                                                                     
  Permission 'contextMenus' is unknown or URL pattern is malformed.                                                           
  Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.
(Use `electron --trace-warnings ...` to show where the warning was created)                                                   
(node:12076) UnhandledPromiseRejectionWarning: ReferenceError: path is not defined
    at createWindow (webpack:///./src/background.js?:32:16)
    at App.eval (webpack:///./src/background.js?:70:3)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
(node:12076) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). T
o terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:12076) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[Matthijs van der Burgh]

Vue3 is not supported.

[Barrosy]

Vue3 is not supported.

Ah my bad, I guess the documentation could be updated on that part, I missed the right documentation.