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 withconfigureDefaultWidth
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
;
content rendered when window is less than 1200px content rendered when window is greater than or equal 600px 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.
To configure default values:
;; ;