Vue 3 and BabylonJS 5 support in DWC

JoergS5

I currently develop a plugin to run inside DWC. I develop under Vue 3 and BabylonJS 5.4, and DWC 3.4.0 runs Vue 2 and Babylon 4.2. Is it possible to run my code as plugin inside DWC and how? And if not, will there be a DWC version to support it and when? I could maybe change to Vue 2 for integration, but Babylon 5 would be important for me, because I use their playground a lot for testing and my main development is there.

chrishamm

@joergs5 You should not have this in your index.js:

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h=> h(App)
}).$mount('#app');

Also you don't seem to import your RobotViewer component at the top so you probably get an error in the JS console. Try adding something like

import RobotViewer from './RobotViewer.vue'

before the registerRoute call if that's the right path to your Vue component.

chrishamm

@joergs5 I have not attempted to upgrade the BabylonJS library yet but since it isn't part of the core, it may just work. It may be necessary to disable the heightmap and GCode viewer plugins in src/plugins/index.js to compile everything. Webpack should then bundle the BabylonJS library with your plugin once you build it.

I have plans to upgrade to Vue 3 at some point but since it will be breaking, it may not happen before software version 4.0. The current stable version of Vuetify (the UI framework) still uses Vue 2 as well but I read they're planning to release the next major version based on Vue 3 sometime this May.

JoergS5

@chrishamm ok, thanks for information. I'll try Vue 2 with BabylonJS 5. It's a great library, I was impressed by https://playground.babylonjs.com/#1UFGZH#12
which could e. g. show the current printer configuration (data read from config.g).

JoergS5

I am nearly finished developing the first plugin version, but I cannot manage to put it into the navigation (like G-Code Viewer and Heightmap), maybe someone can help me.
In index.js I have:

'use strict'

import { registerRoute } from '../../routes';
import { registerPluginContextMenuItem, ContextMenuType } from '../index.js';

registerRoute(RobotViewer, {
	Job: {
		RobotViewer: {
			icon: 'mdi-rotate-3d',
			caption: 'RobotViewer',
			path: '/Job/RobotViewer'
		}
	}
});

registerPluginContextMenuItem(() => 'RobotViewer', '/Job/RobotViewer', 'mdi-rotate-3d', 'view-3d-model', ContextMenuType.JobFileList);

import Vue from 'vue'
import App from './App.vue'
new Vue({
  render: h=> h(App)
}).$mount('#app');

I hoped this is enough to add it to the navigation. What do I miss??

chrishamm

@joergs5 You should not have this in your index.js:

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h=> h(App)
}).$mount('#app');

Also you don't seem to import your RobotViewer component at the top so you probably get an error in the JS console. Try adding something like

import RobotViewer from './RobotViewer.vue'

before the registerRoute call if that's the right path to your Vue component.

JoergS5

@chrishamm I have a App.vue and from there I start, so this will propably be the problem, having a wrong name to start from. I'll check it, thanks for the hint. I'm new to Vue, but I like how the projects are all working together (BabylonJS, Vuetify etc.). It's a nice environment.

JoergS5

@chrishamm it worked!! Thanks a lot!!