vue-simple-breakpoints

Installation and usage

See official documentation here.

$ npm install vue-simple-breakpoints

import Vue from 'vue'
import VueSimpleBreakpoints from 'vue-simple-breakpoints'

Vue.use(VueSimpleBreakpoints)

new Vue({
    el: '#app',

    mounted() {
        if(this.$breakpoints.isMobile()) {
            // some mobile stuff
        }
    }
};

<div id="app">
    <div v-if="$breakpoints.isMobile()">Mobile</div>
    <div v-if="$breakpoints.isTablet()">Tablet</div>
    <div v-if="$breakpoints.isSmallDesktop()">Small Desktop</div>
    <div v-if="$breakpoints.isLargeDesktop()">Large Desktop</div>

    <!-- simple scalable div -->
    <div class="some-div-with-window-height" :style="{ height: $breakpoints.viewport.height + 'px' }">
        A div that grows with the window
    </div>
</div>

Adding Custom Breakpoints

import Vue from 'vue'
import VueSimpleBreakpoints from 'vue-simple-breakpoints'

Vue.use(VueSimpleBreakpoints, { mobile: 320, tablet: 640, small_desktop: 1000, large_desktop: 1200 })

new Vue({
    el: '#app',

    mounted() {
        if(this.$breakpoints.isMobile()) {
            // some mobile stuff for a 320 width
        }
    }
};