CODEWITHSUNDEEP
vue.jsquasar-framework
boltej
boltej

Reputation: 43

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 '-' "

  1. 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

  1. 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!

Upvotes: 2

Views: 228

Answers (2)

Jaleel
Jaleel

Reputation: 38

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

Upvotes: 0

kissu
kissu

Reputation: 46774

Usually, I would try to debug it for you, but here the project has been unmaintained for 3 years, so you could give up on it because it looks like it's CJS anyway.
You already have breakpoints baked into Quasar, so I am not sure to see the point of such NPM package.

Alternatively, you could also use VueUse for the same purpose. Those are IMO more healthy alternatives that will make you struggle less with your project mid-term.

Upvotes: 0

Related Questions