Nocturnal Prancing Mosquito

    vue-responsive-component

    1.0.5 • Public • Published

    vue-responsive-component

    Responsive vue component to render contents conditionally based on window's width.

    When constraints are not satisfied, component's children is not rendered at all. This is mostly useful for

    • SSR rendered pages where you don't want to render some (mobile/web related) content at all. In that case you need to provide defaultWidth, or configure it globally with configureDefaultWidth to be used for server-side-rendering.

    • Layouts where a component is rendered in completely different places based on window's width.

    Install

    npm install vue-responsive-component

    or

    yarn add vue-responsive-component

    Usage Example

    import Responsive from 'vue-responsive-component';
    <template>
      <div>
        <responsive max="1200">
          content rendered when window is less than 1200px
        </responsive>
        <responsive min="600">
          content rendered when window is greater than or equal 600px
        </responsive>
        <responsive min="md" default-width="900">
          content rendered when window is 
          greater than or equal `md` brekapoint (600px by default)
          in SSR, window width is 900px and this component will be rendered.
        </responsive>
      </div>
    </template>

    To configure default values:

    import {configureBreakpoints, configureDefaultWidth} from 'vue-responsive-component';
    configureBreakpoints({
      // these are default breakpoints, you can add other breakpoints too.
      xs: 0,
      sm: 500,
      md: 600,
      lg: 900,
      xl: 1200,
    });
     
    configureDefaultWidth(600);

    Keywords

    none

    Install

    npm i vue-responsive-component

    DownloadsWeekly Downloads

    3

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    138 kB

    Total Files

    7

    Last publish

    Collaborators

    • arash16