CODEWITHSUNDEEP
urllocal-storagevue.jselectronvue-router
Edmond Tamas
Edmond Tamas

Reputation: 3305

Electron + Vue (SPA): Not allowed to load local resource: file:///app/src/Products.vue

I have an Electron app + Vue for rooting. I am having problems loading the content into a newly opened window. The window is launched from a Vue component. When it opens I get a blank window and:

Not allowed to load local resource: file:///app/src/Products.vue

I have tried different methods mentioned on stackoverflow but the error still persists.

<style scoped>
</style>

<template>
  <div class="container-fluid">
    Parent window...
    <button type="submit" class="btn btn-primary" v-on:click="add">+ Add Product</button>
  </div>
</template>


<script>
  export default {
    methods: {
      add: function () {
        const remote = require('electron').remote
        const BrowserWindow = remote.BrowserWindow
        let win
        win = new BrowserWindow({
          height: 600,
          width: 800
        })
        win.loadURL(`file://${__dirname}/app/src/Products.vue`)
        win.openDevTools()
      }
    }
  }
</script>

Upvotes: 1

Views: 1326

Answers (1)

Tshaby
Tshaby

Reputation: 11

In your case, child window must be created from the main process to launch a child window with local resources in Electron. You can use ipc (ipcMain, ipcRenderer) for this.

For example,

In main process : 

function createChildWindow(payload) {
  let child = new BrowserWindow({ parent :mainWindow  
  });

  child.loadURL(url.format({
    pathname: path.join(__dirname, 'child.html'),
    protocol: 'file:',
    slashes: true,
  }));
  child.once('ready-to-show', () => {
    child.show()
  });
}

ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // prints "ping" 
  createChildWindow(arg);
});

In renderer process(web page) :

const {ipcRenderer}  = window.require('electron')
async launchChildWindow(){
 ipcRenderer.send('asynchronous-message', '<payload>');
}

You can also write custom events like this,

// Renderer process
ipcRenderer.invoke('some-name', someArgument).then((result) => {
  // ...
})

// Main process
ipcMain.handle('some-name', async (event, someArgument) => {
  const result = await doSomeWork(someArgument)
  return result
})

Upvotes: 1

Related Questions