@cardo500/vue-media-query
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    Vue Media Query

    This is a minimimalistc vue plugin to help frontenders building cool UI by managing what should be visible on each screen size.

    • Type some Markdown on the left
    • See HTML in the right
    • Magic

    Features!

    • Display current media size (xs, sm, md and lg)
    • Medias sizes configurable

    Installation

    Install the dependencies and devDependencies and start the server.

    $ npm i vue-media-query --save

    Usage

    import Vue from 'vue'
    import VueMediaQuery from 'vue-media-query'
     
    Vue.use(VueMediaQuery, {
        xs: 425,
        sm: 769,
        md: 992,
        lg: Infinity
    });

    If no options is passed VueMediaQuery will use default values

    Usage

    Inside your template you can simply do

    <template>
        <div>
            Will be true when matches the media size you have defined
            {{ $vmq.xs }} 
            {{ $vmq.sm }}
            {{ $vmq.md }}
            {{ $vmq.lg }}
            {{ $vmq.size }} -> Returns the current screen witdh
        <div>
    </template>
    

    Using as computed property

    <script lang="ts">
        import {Component, Vue} from 'vue-property-decorator';
     
        @Component
        export default class App extends Vue {
            console.log(this.$vmq.sm)
            // Will console TRUE whem media size is the defined SM
        }
    </script>

    Development

    Want to contribute? Please submit a PR or report issues.

    Todos

    • Write Tests
    • Test on more browsers

    License

    • GPL3

    Install

    npm i @cardo500/vue-media-query

    DownloadsWeekly Downloads

    3

    Version

    0.0.1

    License

    GPL-3.0-or-later

    Unpacked Size

    40.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • cardo500