Trying to use a Vue plugin (Vue3Mq) in a quasar app - How to configure?

I'm trying to configure a quasar javascript app to us a Vue plugin (Vue3Mq - for the media query capability).

After installing Vue3Mq with npm, I've have tried the following with no success:

1. Add Vue3Mq as a plugin by using the following code in quasar.config.js:

framework: {
...
    plugins: ['vue3-mq']
},
...

which generates the following error - "Syntax Error: Unexpected token at '-' "

2. Add Vue3Mq as a "boot" plugin by using the following code in quasar.config.js:

module.exports = configure(function (/* ctx */) {
    return {
        boot: ['vue3mq']
}

Add adding the following file (vue3mq.js) to the apps '/src/boot' folder:

import { boot } from 'quasar/wrappers'
import Vue3Mq from 'vue3-mq'
import Vue from "vue";

Vue.use(Vue3Mq)

export default boot(({ app }) => {
    app.config.globalProperties.$vue3mq = vue3mq
})

This generates the following error - boot error: TypeError: Failed to fetch dynamically imported module: http://localhost:9000/src/boot/vue3mq

3. just import Vue3Mq:

<template>
    <div>
        <mq-responsive mq="lg">
            <span>Large</span>
        </mq-responsive>
        <mq-responsive mq="md">
            <span>Med</span>
        </mq-responsive>
        <mq-responsive mq="sm">
            <span>Small</span>
        </mq-responsive>
      </div>
</template>

<script setup>
    import { onMounted, ref } from 'vue'
    import { MqResponsive } from "vue3-mq";
    import { useMq } from "vue3-mq";

    const mq = useMq();

</script>

This generates the following error - "Uncaught (in promise) Error: Vue3Mq is not installed in this app. Please follow the installation instructions and try again"

Removing the "const mq = useMq()" fixes the error, but in either case, the tags aren't responsive to screen size changes - all three spans are printed.

Any suggestions would be most appreciated!

You don't need v3mq in Quasar as Quasar comes packed with built-in breakpoint management, you could do this instead for instance:

<template>
    <div>
        <div class="lg">
            <span>Large</span>
        </div>
        <div class="md">
            <span>Med</span>
        </div>
        <div class="sm">
            <span>Small</span>
        </div>
        <!-- You can also do breakpoint combination -->
        <div class="gt-sm">
            <span>greater than Small</span>
        </div>
      </div>
</template>

<script setup>
    import { onMounted, ref } from 'vue'
</script>

Source