It's possible to use Vue.js Router in CEF ?

[State Valentin 4]

Can someone please show me an example of a CEF Web Application where it uses Vue.js router, please ? I've tried but i can't manage to make it work.

[MarkCavalli 101]

https://github.com/MarkCavalli/rage-server-start-template

[State Valentin 4]

Thanks @MarkCavalli for the project. In the end i've ended up using:  Vue Cli 3 (https://cli.vuejs.org/) + Vue Js Store. 

Edited January 17 by State Valentin

[deadnuts143 1]

A bit late, but someone else might need this. 🤔

In case you've just generated a new project via the vue-cli, you can go with this:

Change the publicPath in vue.config.js

module.exports = {
  publicPath: './',
}

Use hash-mode in router.js (this will append the route-path to your index.html with "#" before and you're able to call the index file directly without serving it first)

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    }
  ]
})

Call the index.html after you built your project via npm run build and put the dist-Directory wherever your CEF files should be.

mp.browsers.new('package://<PATH_TO_YOUR_CEF_DIR>/dist/index.html');

I just went with the default vue-cli app here and it works fine.

 

Alternatively you just serve your vue app via http and call it, for example:

mp.browsers.new('http://localhost:8080');

 

I like the index.html-ish solution more, because this way you have your CEF files neatly within your client_packages and nothing depends on another process running. 👍