Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

eggplantSword's avatar

Help converting a small file from vue 2 to vue 3

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!

0 likes
1 reply
AungHtetPaing__'s avatar

@msslgomez you can look at vue docs: https://vuejs.org/guide/essentials/computed.html toggle options to composition

<script setup>
import { ref, computed } from 'vue'

const breakpoints = ref('')

const avatarSize = computed(() => {
  switch (this.breakpoints.is) {
                case "xs":
                    return 44;
                case "sm":
                    return 56;
                case "md":
                    return 80;
                case "lg":
                    return 100;
                case "xl":
                    return 115;
            }
})
</script>

Please or to participate in this conversation.