如何在Quasar应用中配置Vue3Mq媒体查询插件？

错误原因拆解 #

• 框架插件配置错误：Quasar的framework.plugins仅支持官方内置插件，第三方插件不能直接在此注册，因此触发语法错误。
• Boot文件配置错误：
  • Vue3环境无需导入Vue构造函数，应使用app.use()注册插件
  • 变量名大小写不匹配（vue3mq应为Vue3Mq）
  • 文件命名或路径不一致导致动态导入失败
• 组件局部导入未全局初始化：useMq()依赖插件全局安装后的上下文，仅单独导入组件无法启动响应式媒体查询逻辑，因此mq-responsive标签失效。

正确配置流程 #

1. 确认插件安装完成 #

npm install vue3-mq

2. 编写Boot配置文件 #

在src/boot目录下创建vue3mq.js，内容如下：

import { boot } from 'quasar/wrappers'
import Vue3Mq from 'vue3-mq'

export default boot(({ app }) => {
  // 可自定义断点配置，以下为默认值示例
  app.use(Vue3Mq, {
    breakpoints: {
      sm: 0,
      md: 768,
      lg: 1024,
      xl: 1280,
      xxl: 1440
    }
  })
})

3. 在Quasar配置中注册Boot文件 #

修改quasar.config.js，确保boot数组包含vue3mq（注意与文件名一致）：

module.exports = configure(function (/* ctx */) {
  return {
    // 其他配置项...
    boot: ['vue3mq'],
    // 其他配置项...
  }
})

4. 组件中正常使用Vue3Mq #

完成全局配置后，即可同时使用组件和组合式API：

<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>
    <p>当前断点：{{ mq.current }}</p>
  </div>
</template>

<script setup>
import { useMq } from 'vue3-mq'

const mq = useMq()
</script>

核心注意点 #

• Vue3必须通过app.use()注册插件，而非Vue2的Vue.use()
• 确保Boot文件名与quasar.config.js中的配置完全一致
• 只有全局注册插件后，useMq()和mq-responsive才能正常触发响应式逻辑

内容的提问来源于stack exchange，提问作者boltej