vueuse
vueuse copied to clipboard
[Bug] breakpoints.ts is wrong
Describe the bug
This file: https://github.com/vueuse/vueuse/blob/main/packages/core/useBreakpoints/breakpoints.ts
I tested these breakpoints.
breakpointsVuetify, width 496, but got[], missingxsbreakpointsVuetify, width 667, but got["xs"], missingsmbreakpointsVuetify, width 1015, but got["xs", "sm"], missingmd
Its results are different from vuetify's table.
| Deice | code | Type | Range |
|---|---|---|---|
| Extra small | xs | Small to large phone | < 600px |
| Small | sm | Small to medium tablet | 600px > < 960px |
| Medium | md | Large tablet to laptop | 960px > < 1264px* |
| Large | lg | Desktop | 1264px > < 1904px* |
| Extra large | xl | 4k and ultra-wide | > 1904px* |
I think it should be like breakpointsBootstrapV5, where xs is set to 0 and the other numbers are moved back one code in order.
Also, I looked at the documentation, Tailwind, MasterCss are fine, AntDesign points out on another page that xs is a width less than 576, quasar have the same problem with Vuetify, and PrimeFlex's documentation points to a 404 page.
Reproduction
https://stackblitz.com/edit/vitejs-vite-qvqxdv/?file=src%2FApp.vue,package.json
System Info
System:
OS: Windows 10 10.0.19045
CPU: (4) x64 Intel(R) Core(TM) i3-4170 CPU @ 3.70GHz
Memory: 1.64 GB / 11.87 GB
Binaries:
Node: 21.2.0 - D:\Program Files\nodejs\node.EXE
Yarn: 1.22.21 - D:\Program Files\nodejs\yarn.CMD
npm: 10.2.3 - D:\Program Files\nodejs\npm.CMD
pnpm: 8.14.0 - D:\Program Files\nodejs\pnpm.CMD
Browsers:
Edge: Chromium (120.0.2210.77)
Internet Explorer: 11.0.19041.3636
Used Package Manager
pnpm
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
- [X] The provided reproduction is a minimal reproducible example of the bug.