Leaderboard

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. 👍

Hi! I use this own solution 1. On the client /* ** Browser singleton */ class Browser { constructor() { if (!Browser.instance) { Browser.instance = this } return Browser.instance } // load browser load() { this.browser = mp.browsers.new('package://ui/index.html') } // send event with json data to UI triggerJson(eventName, jsonData) { this.browser.execute(`trigger('${eventName}', '${jsonData}')`) } } const instance = new Browser() export default instance 2. On the UI // Global manager in UI for handling events from client var EventManager = { events: {}, on(eventName, handler) { if (eventName in this.events) this.events[eventName].push(handler); else this.events[eventName] = [handler]; } } // browser.execute('trigger( ... )') is this trigger function trigger(eventName, args) { var handlers = EventManager.events[eventName]; try { var data = JSON.parse(args); } catch(e) { // I have handler on client if something go wrong mp.trigger('uiException', e.message); } handlers.forEach(handler => handler(data)); } 3. And in any vue component export default { data() { return { isOpen: false, name: '' } }, methods: { // Show hud showHUD(data) { // data is already parsed json object this.name = data.name this.isOpen = true } }, created() { EventManager.on("ShowPlayerHUDEvent", this.showHUD) } In any part of the client we just send event like this: Browser.triggerJson('ShowPlayerHUDEvent', JSON.stringify({name: 'Vladimir Lenin', age: undefined}))

Ich bedanke mich bei allen die sich gemeldet haben.