[Vuejs]-How do i correctly reference Vue.js node_module from electron-forge boilerplate?

by

0👍

✅

You need to reference vue via some bundler like webpack (otherwise, like you said, it is not available at runtime). Your method won’t work because the generated file structure isn’t the same as the one you have during ‘design time’

Here’s an example with vue-cli which sets up a starter project:

npm i -g @vue/cli
vue create project-name
cd project-name
vue add electron-builder
npm install

Done. Your project is operational.

With one little caveat you would encounter later, if you are using vue-router. Add the following in router.js (it changes router mode to hash instead of history so it works with electron).

export default new Router({
    mode: process.env.IS_ELECTRON ? 'hash' : 'history',
})

As a sidenote, vue-cli abstracts away a lot of config. If you ever get lost, just print it out with

vue inspect > ./app/inspect.js.md

(The part after > means save to the named file, otherwise it would print it out in your console.) Check it out, that’s the correct set up you’re looking for, just auto created with vue-cli.

Also, check out the generated /public/index.html, it has no mention of importing vue 😉

Best of luck

0👍

After some tinkering, I came up with this solution:

The HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>💖 Hello World!</h1>
    <p>Welcome to your Electron application.</p>
    <div id="vue-app">{{ message }}</div>
  </body>
</html>

I then added an import statement to the electron-forge boilerplate renderer.ts, like this:

import './vueapp.js';

and finally, I created a new script file called vueapp.js like this:

import Vue from 'vue/dist/vue.js';

var app = new Vue({
  el: '#vue-app',
  data: {
    message: 'Hello Vue!'
  }
});

I welcome feedback and comments; this may or may not be the correct approach and would love to hear how others have done this.

Leave a comment