Overriding a DWC Route from Plugin
-
Q for @chrishamm (I think).
I'm currently writing a plugin to add UI elements for the Probing system we use for the Milo CNC mill.
This includes adding a new menu item, but also involves modifying the existing UI from the plugin itself, to allow us to show further information in the status areas (things like selected tool radius and offsets, modbus status etc).
This is doable straight from a plugin because we can just register our own Vue components with the same name as the DWC ones, and these are loaded instead. All good so far.
I'd like to also modify the job status view, so that we can show relevant information rather than the current view which mostly contains irrelevant information when using it on a CNC machine.
However, I haven't worked out how to do this yet as the Job Status view is a 'route', and I haven't yet worked out how to override the Component loaded by the route.
Do you know if it's possible to override the component that gets loaded when a particular route is triggered? Is there another way to achieve this that I'm missing?
What I absolutely don't want to do is maintain my own fork of DWC - the vast majority of the code and layout works fine for our purposes, and I would much rather distribute everything in a plugin.
-
@NineMile Well, from a plugin you should be able to access the Vue router instance but I don't know how easy it is to actually replace components in it. AFAIK there was only
addRoute
. You might get away by adding abeforeEach
hook and and by modifying the requested route before the original component is actually rendered. See also https://v3.router.vuejs.org/api/#router-instance-methods -
@chrishamm Thanks.
In true 'sods law' fashion, about 5 minutes after posting I worked it out - and
beforeEach
is what I ended up with:import Vue, { VueConstructor } from "vue"; import { default as VueRouter } from "@/routes"; import OriginalJobStatus from "@/routes/Job/Status.vue"; import JobStatus from "./Job/Status.vue"; // List of original => new components to override const overrides: [VueConstructor<Vue>, VueConstructor<Vue>][] = [ [OriginalJobStatus, JobStatus] ]; VueRouter.beforeEach((to, _, next) => { overrides.forEach(([original, replacement]) => { if (to.matched[0].components.default === original) { to.matched[0].components.default = replacement; } }); next(); });