Vue-Breakpoint
A vue layout component to provide dynamic, reactive media query information. Uses the match media api.
Heavily inspired from Full Stack Radio episode #81 and the vue-mq library.
Install
npm i vue-breakpoint
Currently two bundles are provided:
- a basic global variable export for quick use in the browser
vue-breakpoint/dist/index.js
exposeswindow.VueBreakpoint
- an ES2015 module for use with any build system
vue-breakpoint/dist/index.esm.js
These are appropriately marked in the package.json
manifest under main
and
module
respectively. TypeScript typings are also provided via the types
entry.
Exports
The package exports two items: a component and a plugin (BreakpointComponent
,
BreakpointPlugin
). These two offer distinct use cases.
BreakpointPlugin
BreakpointPlugin
registers the component <breakpoint />
globally, but uses a
single media query manager internally. This makes extensive usage throughout
your app efficient.
To install the plugin, provide an optional media query map. A default is
provided that queries screen width according to the Bootstrap 4 breakpoints and
aliases (xs
, sm
, md
, lg
, xl
), but here's an example:
// ES Module;// Window globalconst BreakpointPlugin = windowVueBreakpoint; Vue;
For a better look at the possibilities of the media queries, have a look at the query builder's test suite. Also check out CSS Tricks for media queries.
BreakpointComponent
BreakpointComponent
is a Vue component that accepts the breakpoint/media-query
map as a prop. This means that each component instance manages it's own media
queries, and can have isolated control to provide one-off responsive queries. It
also means that if the breakpoint map gets updated, the component will remove
all the old listeners and re-register it's media queries. This allows for
dynamically responsive layouts—dynamic to whatever you want!
To use the discrete component, add it to your consuming component's components
object.
// ES Module;// Window globalconst BreakpointComponent = windowVueBreakpoint; const MyParentComponent = Vue;
Usage
Start off by determining your own set of media queries/breakpoints, or use the built-in bootstrap 4 style map. You can find it's definition here in the source.
Once you have the breakpoints decided and the installation taken care of, wrap
some of your layout in a <breakpoint>
component (wrap an element/component
with a single root node) and define the slot-scope
attribute. The value of
slot-scope
is the parameter name for the object that will hold all the
breakpoint values. For example:
<!-- `media` now holds our breakpoint values --> Hello world! <!-- The breakpoint values are booleans --> <!-- for whether or not their condition is met. --> <!-- Remember, these are based on the query map keys provided. --> I'm on a large screen! I'm in-between... I'm on a small screen!
Since the slot-scope
is an object, it can also be destructured to pull out the
relevant values more easily.
Hello world! I'm on a large screen! I'm on a small screen!
When you need custom, one-off breakpoint logic, use the discrete component.
<!-- Main grid setup --> <!-- Unique media queries --> For best viewing, we recommend portrait orientation.
For more info, consult the Vue documentation on scoped slots.
Try It Out
Hack on this fiddle: vue-breakpoint jsfiddle