VueJS not render data on DOM inside electron application

user_12912441 0
Viewed 223

I have an electron project where I'm implementing vuejs inside it. I'm able to load vue script and the browser window will open correctly the index.html file that contains the GUI that is made using bootstrap 4. I've noticed that the vue instance will not process the syntax {{ hello }} that is used by vue. I don't know where the problem is, but I think it's something related with the electron way of work that will cause problems to vue ?

I've installed it using the npm install vue --save-dev and all the project dependencies like bootstrap and jQuery was installed with the same method.

here is my code

package.json file

{
  "name": "clients-manager",
  "version": "1.0.0",
  "description": "A simple hosting credentials manager app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.4.1",
    "dexie": "^2.0.4",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.1",
    "vue": "^2.6.11"
  }
}

main.js Javascript 

const electron = require('electron');
const { app, BrowserWindow } = electron;

function createWindow(){
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  win.loadFile('index.html');

  var myapp = new Vue({
    el: '#app',
    data: {
      hello: 'Hello Vue!'
    }
  });
  console.log(myapp);
}
app.whenReady().then(createWindow);

index.html

<div class="col-4" id="app">
  <ul class="nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="#">{{ hello }}</a>
    </li>
  </ul>
</div>
electron vue.js javascript
2 Answers

you didn't define hello , you defined message in VUE Data

use this

var myapp = new Vue({ el: '#app', data: { hello: 'Hello Vue!' } });

user_119697070

I created a project using electron-vue boilerplate.

You can simply try it with npm.

# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev

For more information, please refer to the link https://simulatedgreg.gitbooks.io/electron-vue/content/en/.

user_150270350
Related