Vuetify: expose a global variable of the current breakpoint xs,sm,md,lg to all component

[dohomi]

As discussed earlier: it would be nice to have the current visible breakpoint variable as a global variable accessible in all components. The idea would be a client side watcher on window resize and dispatch the current breakpoint name.

[cyrrill]

@dohomi @johnleider

I was looking into an easy way of achieving this, and it seems like it wouldn't be too hard. Evan has sketched out the basics here:

https://github.com/vuejs/vue/issues/1915

Seems like we would just need to setup some window listeners and have a function that reads the value of the viewport width, and with a computed property expose the current value of: xs, sm, md, lg, xl

Where:

xs - extra small viewport devices (< 576px)
sm - small viewport devices (< 768px)
md - medium viewport devices (< 992px)
lg - large viewport devices (< 1200px)
xl - extra large viewport devices (> 1200px)

Viewport width can be attained crossbrowser compatible as:
https://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript

[stbaer]

Another option would be to use media queries, e.g.:

@media (max-width: $grid-breakpoints.xs) 
        &:before
            content: "breakpoint-xs";
@media (min-width: $grid-breakpoints.xs+1 ) and (max-width: $grid-breakpoints.sm)
        &:before
            content: "breakpoint-sm";
...

to get the breakpoint in js:

const getBreakpoint = () => {
    if (typeof window === 'undefined') return;

    const appContainer = document.querySelector('[data-app]')
    return window
        .getComputedStyle(appContainer, ':before')
        .getPropertyValue('content').replace(/"/g, '');
}

[cyrrill]

Here is a mixin put together by @cb109

https://gist.github.com/cb109/b074a65f7595cffc21cea59ce8d15f9b

[johnleider]

Can I get a few peoples examples of how they would expect this to work?

[jacekkarczmarczyk]

For example:

<v-dialog :full-screen="$breakpoint.xs"></v-dialog>
<v-dialog :full-screen="$breakpoint.xsOnly"></v-dialog>
<v-dialog :full-screen="$breakpoint.smAndDown"></v-dialog>

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord