VueJS 3+Vuetify组件间移动端检测逻辑复用问题

1. 封装可复用的组合式函数 #

在项目中创建单独的组合式函数文件（推荐放在src/composables目录下，没有的话新建该目录），比如useMobile.js，把移动端判断逻辑封装进去：

// src/composables/useMobile.js
import { computed } from 'vue'
import { useDisplay } from 'vuetify'

export function useMobile() {
  // 如果你之前用的是Vuetify内置的mobile判断
  const { mobile } = useDisplay()
  const isMobile = computed(() => mobile.value)

  // 如果你是自定义断点判断（比如判断xs/sm为移动端），替换成下面的代码：
  // const { breakpoint } = useDisplay()
  // const isMobile = computed(() => ['xs', 'sm'].includes(breakpoint.value))

  return { isMobile }
}

2. 在目标组件中导入并使用 #

在需要复用逻辑的组件里，正确导入这个组合式函数并解构出isMobile属性即可，注意文件路径要和实际项目结构匹配：

<script setup>
// 路径根据你的composables目录位置调整，@是Vue项目中src目录的默认别名
import { useMobile } from '@/composables/useMobile'

const { isMobile } = useMobile()
</script>

<template>
  <div v-show="isMobile">仅在移动端展示的内容</div>
</template>

3. 排查"cannot find name useMobile"错误 #

如果还是出现这个编译错误，检查以下几点：

• 确认useMobile.js文件的路径和文件名拼写完全正确（注意大小写敏感）
• 确认函数是用export function useMobile()导出的；如果用默认导出，导入方式要改成import useMobile from '@/composables/useMobile'
• 检查项目中Vuetify是否已正确初始化，useDisplay是Vuetify提供的API，必须确保Vuetify在项目中正常配置

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