I have this file I found online that keeps track of the tailwind breakpoints and I can use them as variables but I'm very new to Vue 3 so I don't know how to convert the file and make it work.
This is the file breakpoints.js
import Vue from 'vue'
const screens = {
xs: 320,
sm: 640,
md: 768,
lg: 1024,
xl: 1280
}
const xs = val => val >= screens.xs && val < screens.sm
const sm = val => val >= screens.sm && val < screens.md
const md = val => val >= screens.md && val < screens.lg
const lg = val => val >= screens.lg && val < screens.xl
const xl = val => val >= screens.xl
const getBreakpoint = w => {
if (xs(w)) return 'xs'
else if (sm(w)) return 'sm'
else if (md(w)) return 'md'
else if (lg(w)) return 'lg'
else if (xl(w)) return 'xl'
else return 'all'
}
const debounce = function(func, wait) {
var timeout
return () => {
const later = function() {
timeout = null
}
const callNow = !timeout
clearTimeout(timeout)
timeout = setTimeout(later, wait)
if (callNow) func()
}
}
const breakpoints = Vue.observable({
w: window.innerWidth,
h: window.innerHeight,
is: getBreakpoint(window.innerWidth)
})
window.addEventListener(
'resize',
debounce(() => {
breakpoints.w = window.innerWidth
breakpoints.h = window.innerHeight
breakpoints.is = getBreakpoint(window.innerWidth)
}, 200),
false
)
export default breakpoints
This is an example of how it's used
import breakpoints from "@/shared/breakpoints";
export default {
data() {
return {
breakpoints,
};
},
computed: {
avatar_size() {
switch (this.breakpoints.is) {
case "xs":
return 44;
case "sm":
return 56;
case "md":
return 80;
case "lg":
return 100;
case "xl":
return 115;
}
},
},
Any help would be appreciated!