[Question] $fineMq reactive prop undefined / Register .on callback with plugin

[Jones-S]

• I'm submitting a ... [x] question about how to use this project

• Summary The Readme tells me that I have the following three instances available:

// Three reactive properties will then be available on Vue instances: // - $mq is an object that contains the matching state for each alias in the form { [alias]: true/false }. // - $lastActiveAlias will contain the last alias that was matched and triggered by the listener. // - $fineMq is a FineMq instance for advanced usages.

Now I can access context.root.$mq and context.root.$lastActiveAlias but I can't access context.root.$fineMq because this is undefined.

I am using fineMq as a plugin and I would like to register an .on callback, now I don't really know how I could register that..

import Vue from 'vue'
import FineMq from 'fine-mq'

Vue.use(FineMq, {
  aliases: {
    mobile: 574,
    tablet: [575, 1024],
    mobilefooter: 1024,
    desktop: [1025, 1279],
    mobilenav: 1279,
    widescreen: [1280, 1365],
    ipadpro: [1366],
    landscape: '(orientation: landscape)'
  }

And than later on within a composable of my composition api I would like to register this .on callback, but I don't know how to achieve that.

Help is very welcome. Thank you in advance.

Cheers

[nash403]

Hi !

Sorry for late answer I am currently on vacation.

I noticed a few days ago that my plugin has issues when used with the composition api.

I guess the difference here comes from how $fineMq is injected (on the Vue instance prototype) in opposition to how $mq and $lastActiveAlias are injected (as computed mixins).

You'll also notice that $mq is not reactive inside the setup function (if you use it for a computed or a watcher for ex) but it is in the template or in computed option.

I'll investigate more when I return from vacation and try release a fix for those issues.

[Jones-S]

Hey @nash403 Could you find some solution for this? I need to update vue and I would like to use the built in composition api in vue 2.7+. And now context.root is even undefined. So I cannot use context.root.$mq anymore.

I would be extremly happy if you could help me out here.

Best