## # Viewport

### # Overview

Viewport plugin populates components with computed viewport properties, which can be used for conditional rendering, as well as other responsive purposes;

Resize the window to recompute the props
$viewport.size
small
$viewport.isMobileOnly
true
$viewport.isMobileDown
true
$viewport.isMobileUp
true
$viewport.isTabletOnly
false
$viewport.isTabletDown
true
$viewport.isTabletUp
false
$viewport.isDesktopOnly
false
$viewport.isDesktopDown
true
$viewport.isDesktopUp
false
$viewport.isHdOnly
false
$viewport.isHdDown
true
$viewport.isHdUp
false
$viewport.isPortrait
true

### # Breakpoints

You can configure breakpoints by passing them with the config object at initialization.

    import Vue from 'vue';
    import NoahUi from 'noah-ui';
    import config from 'noah-ui/src/noah.config';

    config.viewport.breakpoints = {
        mobile: 640,
        tablet: 960,
        desktop: 1280,
        hd: 1920,
    };

    Vue.use(NoahUi, config);

## # Intersection Observer

If you need to know if your component is in viewport (e.g. to lazy-load external resources, such as images), you can register an intersection observer when component is mounted: