@biodiversity-nuxtjs/ssr-breakpoints

Nuxt.js

Detect device and infer screen resolution on server or device and screen resolution breaks on client.

📖 Release Notes

Features

1. get bulma breakpoints in js from server or client

Setup

• Add @biodiversity/ssr-breakpoints dependency using yarn or npm to your project

  yarn add @biodiversity/ssr-breakpoints

  npm install @biodiversity/ssr-breakpoints

• Add @biodiversity/ssr-breakpoints to modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    '@biodiversity/ssr-breakpoints',

    // With options
    ['@biodiversity/ssr-breakpoints', { /* module options none yet*/ }],
 ]
}

Usage

<template>
	<section>
        <div v-if="$breakpoints.isDesktopHD">
          Desktop High Definition > 1408px
        </div>

        <div v-if="$breakpoints.isDesktopWS">
          Desktop Wide Screen 1216px from to 1407px
        </div>

        <div v-if="$breakpoints.isDesktop">
        	Desktop 1024px and until 1215px
        </div>

        <div v-if="$breakpoints.isTouch">
          Touch < 1024px
        </div>

        <div v-if="$breakpoint.isTablet">
        	Tablet 769px from to  1023px
        </div>

        <div v-if="$breakpoint.isMobile">
        	Mobile < 768px
        </div>
	</section>
</template>

Contribute

Submit a PR to the SCBD in https://github.com/scbd/biodiversity-nuxtjs/

TODO

1. separate cookie logic that works on server and client into separate module

License

MIT License

Copyright (c) Convention on Biological Diversity [email protected]