$watch a vue-router change on Vue app instance programmatically outside Vue instance

Question

I have a small package that was built in Vue2 that I'm trying to migrate to Vue3 now where a route is being watched programmatically by obtaining the App instance within vue-router and it's being watched like so:

function myPluginName(router) {
  router.app.$watch(`$route.query.${this.config.name}`, () => {
   // do stuff outside my vue instance
  });
}

And its being called within my Vue component like so:

myPluginName(this.$router);

In my Main JS I added the router to my Vue instance:

const app = createApp(App);
router.app = app;
app.use(router);

Which works fine and I can get the router.app as an instance. However in Vue2 you could add a $watch to your app instance and it would catch it for you; this doesn't seem to be the case with Vue3 since console.logging my Vue instance doesn't show any sign of $watch nor does it work.

So in short:

Is there still a way I can watch my Vue instance OUTSIDE my Vue instance?

Update:

It does work when I push my Vue instance into the router.app in my component:

this.$router.app = this
myPluginName(this.$router);

But that doesn't feel really fool-proof ish I guess?

Can't you just import watch method from vue package and run it on your router? watch(route.query), like in any composables? — Kapcash
– Kapcash, Commented Jun 22, 2022 at 7:33
No because I want to watch in my .js plugin file; not within a component. — CaptainCarl
– CaptainCarl, Commented Jun 22, 2022 at 7:44
watch can watch any object. Did you try watching this.$router.currentRoute ? — IVO GELOV
– IVO GELOV, Commented Jun 22, 2022 at 8:11
I know, but where is $watch in my Vue instance (So not in my components) — CaptainCarl
– CaptainCarl, Commented Jun 22, 2022 at 8:13

Kapcash · Accepted Answer · 2022-06-22 09:38:18Z

1

In Vue3, everything related to reactivity is out of any Vue instance. That means you can create a watcher without even having a Vue app:

import { watch } from 'vue'

export function myPlugin(route) {
  watch(route.query, (newQuery, oldQuery) => {
    // TODO
  })
}

There is no more a global $watch property on Vue instances.

answered Jun 22, 2022 at 9:38

Kapcash

6,9802 gold badges22 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

$watch a vue-router change on Vue app instance programmatically outside Vue instance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related