タブレット用のUI分岐を作成

src/use/isMobile.ts

@@ -1,21 +1,7 @@
-import { onUnmounted, Ref, ref } from 'vue'
-
-const MOBILE_BREAKPOINT = '599'
-
-const mql = window.matchMedia(`(min-width: ${MOBILE_BREAKPOINT}px)`)
-
-const useIsMobile = (): { isMobile: Ref<boolean> } => {
-  const isMobile = ref(!mql.matches)
-
-  const onChange = (e: MediaQueryListEvent) => {
-    isMobile.value = !e.matches
-  }
-
-  mql.addEventListener('change', onChange)
-  onUnmounted(() => {
-    mql.removeEventListener('change', onChange)
-  })
+import useBreakpoint from '/@/use/useBreakpoint'
 
+const useIsMobile = () => {
+  const { isSmaller: isMobile } = useBreakpoint('599')
   return { isMobile }
 }
 

src/use/isTablet.ts

@@ -0,0 +1,8 @@
+import useBreakpoint from '/@/use/useBreakpoint'
+
+const useIsTablet = () => {
+  const { isSmaller: IsTablet } = useBreakpoint('1023')
+  return { IsTablet }
+}
+
+export default useIsTablet

src/use/useBreakpoint.ts

@@ -0,0 +1,21 @@
+import { onUnmounted, ref } from 'vue'
+import type { Ref } from 'vue'
+
+const useBreakpoint = (breakpoint: string) => {
+  const mql = window.matchMedia(`(min-width: ${breakpoint}px)`)
+
+  const isSmaller = ref(!mql.matches)
+
+  const onChange = (e: MediaQueryListEvent) => {
+    isSmaller.value = !e.matches
+  }
+
+  mql.addEventListener('change', onChange)
+  onUnmounted(() => {
+    mql.removeEventListener('change', onChange)
+  })
+
+  return { isSmaller }
+}
+
+export default useBreakpoint