@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;
}

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.2.1
    0
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.2.1
    0

Package Sidebar

Install

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

Weekly Downloads

0

Version

0.2.1

License

MIT

Unpacked Size

12.4 kB

Total Files

8

Last publish

Collaborators

  • yutahaga