@yutahaga/vuex-media-breakpoint-up
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.1 • Public • Published

    vuex-media-breakpoint-up

    Getting Started

    yarn add @yutahaga/vuex-media-breakpoint-up
    import Vue from 'vue';
    import Vuex from 'vuex';
    import createBreakpointPlugin, { MUTATION_CHANGE_VIEWPORT } from 'vuex-media-breakpoint-up';
     
    Vue.use(Vuex);
     
    const plugin = createBreakpointPlugin({
      breakpoints: {
        default: 0, // required
        sm: 512,
        md: 768,
        lg: 960,
      },
    });
     
    const store = new Vuex.Store({
      plugins: [plugin],
     
      state: {
        viewport: 'default',
      },
     
      mutations: {
        [MUTATION_CHANGE_VIEWPORT](state, viewport) {
          state.viewport = viewport;
        },
      },
    });

    Options

    export interface PluginOptions {
      breakpoints: Breakpoints;
      debounceFunction?: (interval: number, listener: EventListenerOrEventListenerObject) => EventListenerOrEventListenerObject;
      interval?: number; // debounce interval
      matchMediaMode?: boolean; // if you want to use a number with a unit for a breakpoint
      direction?: 'width' | 'height';
    }
     
    export interface Breakpoints {
      [key: string]: number | string;
    }

    Keywords

    none

    Install

    npm i @yutahaga/vuex-media-breakpoint-up

    DownloadsWeekly Downloads

    2

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    12.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • yutahaga