NoahUI

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: