vue-media-queries

    0.0.5 • Public • Published

    vue-media-queries

    Vue.js v 2.1+ plugin for using mediaMatch based queries.

    Thanks to AStaroverov for creating v-media-query which was the inspiration for this package.

    Note: As of v0.0.5, Output is now minified

    Basic Usage

    Setup
    import Vue from 'vue';
    import {MediaQueries} from 'vue-media-queries';
    import App from './App';
     
    const mediaQueries = new MediaQueries();
     
    Vue.use(mediaQueries);
     
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App },
      mediaQueries: mediaQueries
    });
    Vue Component
    <template>
        <div>
            <div>
            <strong>Screen Size:</strong>
            </div>
            <div v-if="$resize && $mq.above(992)">Desktop</div>
            <div v-else>Tablet and Below</div>
        </div>
    </template>

    Using common CSS Framework responsive bands

    Currently, supported framework are:

    PRs are welcome.

    Bulma
    import Vue from 'vue';
    import {MediaQueries, CommonBands} from 'vue-media-queries';
    import App from './App';
     
    const mediaQueries = new MediaQueries({
      bands: CommonBands.Bulma
    });
     
    Vue.use(mediaQueries);
     
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App },
      mediaQueries: mediaQueries,
      mixins: [CommonBands.Bulma.mixin]
    });
    Bootstrap 4
    import Vue from 'vue';
    import {MediaQueries, CommonBands} from 'vue-media-queries';
    import App from './App';
     
    const mediaQueries = new MediaQueries({
      bands: CommonBands.Bootstrap4
    });
     
    Vue.use(mediaQueries);
     
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App },
      mediaQueries: mediaQueries,
      mixins: [CommonBands.Bootstrap4.mixin]
    });
    Materialize
    import Vue from 'vue';
    import {MediaQueries, CommonBands} from 'vue-media-queries';
    import App from './App';
     
    const mediaQueries = new MediaQueries({
      bands: CommonBands.Materialize
    });
     
    Vue.use(mediaQueries);
     
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App },
      mediaQueries: mediaQueries,
      mixins: [CommonBands.Materialize.mixin]
    });
    Tailwind
    import Vue from 'vue';
    import {MediaQueries, CommonBands} from 'vue-media-queries';
    import App from './App';
     
    const mediaQueries = new MediaQueries({
      bands: CommonBands.Tailwind
    });
     
    Vue.use(mediaQueries);
     
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App },
      mediaQueries: mediaQueries,
      mixins: [CommonBands.Tailwind.mixin]
    });
    Spectre
    import Vue from 'vue';
    import {MediaQueries, CommonBands} from 'vue-media-queries';
    import App from './App';
    const mediaQueries = new MediaQueries({
      bands: CommonBands.Spectre
    });
    Vue.use(mediaQueries);
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App },
      mediaQueries: mediaQueries,
      mixins: [CommonBands.Spectre.mixin]
    });

    Install

    npm i vue-media-queries

    DownloadsWeekly Downloads

    859

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    117 kB

    Total Files

    18

    Last publish

    Collaborators

    • flatanimals