Powered by

# nuxt-viewport

Define custom viewports for your Nuxt️ project

# Features

  • ⚡️  Fast & Light with MatchMedia API ⚡️
  • 🕶  Auto detects the device viewport from Cookie & User-Agent
  • 👌  Zero configuration to start
  • 👴️  Supports IE9+

Note
This version is Nuxt 3 & Nuxt Bridge only. For Nuxt 2 see 1.0.1

# Quick Setup

# 1. Add nuxt-viewport dependency to your project 

# Using npm
npm install --save-dev nuxt-viewport
# Using yarn
yarn add --dev nuxt-viewport

# 2. Add nuxt-viewport to the modules section of nuxt.config.js 

{
  modules: [
    [
      'nuxt-viewport', {
        /* Viewport options */
      }
    ],
  ]
}

using top level options

{
  modules: [
    'nuxt-viewport',
  ],

  viewport: {
    /* Viewport options */
  },
}

# Usage

vue
<script setup>
import { useNuxtApp } from '#app'
const { $viewport } = useNuxtApp()

watch($viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
})
</script>

<template>
  <div>
    <div v-if="$viewport.isLessThan('tablet')">Should render only on mobile</div>
    <div v-else>Current breakpoint: {{ ERROR }}</div>
  </div>
</template>

# Usage with composable

vue
<script setup>
const viewport = useViewport()

watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
})
</script>

<template>
  <div>
    <div v-if="viewport.isLessThan('tablet')">Should render only on mobile</div>
    <div v-else>Current breakpoint: {{ ERROR }}</div>
  </div>
</template>

# Usage with "@nuxt/bridge"

vue
<script setup>
const viewport = useViewport()

watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
})
</script>

<template>
  <div>
    <div v-if="viewport.isLessThan('tablet')">Should render only on mobile</div>
    <div v-else>Current breakpoint: {{ ERROR }}</div>
  </div>
</template>

# Configuration

# breakpoints

  • Type: Object

An object where the key is the name of the viewport, and the value is the viewport size.

# cookieName

  • Type: String
  • Default: viewport

The key for the document cookie.

# defaultBreakpoints

  • Type: Object
  • Detectable devices: console, desktop, embedded, mobile, smarttv, tablet, wearable

An object where the key is the name of the detected device, and the value is the breakpoint key.

# fallbackBreakpoint

  • Type: String
  • Default: viewport

The breakpoint key to be used, if the device was not detected.

# Default configuration 

{
  // ...
  viewport: {
    breakpoints: {
      desktop: 1024,
      desktopMedium: 1280,
      desktopWide: 1600,

      mobile: 320,
      mobileMedium: 375,
      mobileWide: 425,

      tablet: 768,
    },

    cookieName: 'viewport',

    defaultBreakpoints: {
      desktop: 'desktop',
      mobile: 'mobile',
      tablet: 'tablet',
    },

    fallbackBreakpoint: 'desktop',
  },
  // ...
}

# Example configuration for Tailwind CSS 

{
  // ...
  viewport: {
    breakpoints: {
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      '2xl': 1536,
    },

    defaultBreakpoints: {
      desktop: 'lg',
      mobile: 'xs',
      tablet: 'md',
    },

    fallbackBreakpoint: 'lg'
  },
  // ...
}

# API

# viewport.breakpoint

  • Type: String

Current breakpoint.

# viewport.isGreaterThan

  • Type: Boolean
// Example: viewport.breakpoint is "mobile".

viewport.isGreaterThan('mobile') // Result: false.
viewport.isGreaterThan('desktop') // Result: false.

# viewport.isGreaterOrEquals

  • Type: Boolean
// Example: viewport.breakpoint is "mobile".

viewport.isGreaterOrEquals('mobile') // Result: true.
viewport.isGreaterOrEquals('desktop') // Result: false.

# viewport.isLessThan

  • Type: Boolean
// Example: viewport.breakpoint is "desktop".

viewport.isLessThan('desktopWide') // Result: true.
viewport.isLessThan('mobile') // Result: false.

# viewport.match

  • Type: Boolean
// Example: viewport.breakpoint is "tablet".

viewport.match('tablet') // Result: true.
viewport.match('desktop') // Result: false.

# viewport.matches

  • Type: Boolean
// Example: viewport.breakpoint is "mobileWide".

viewport.matches('tablet', 'mobileWide') // Result: true.
viewport.matches('mobile', 'tablet') // Result: false.

# viewport.queries

  • Type: Object

Object with generated media queries.

# Contributing

You can contribute to this module online with CodeSandBox:

Edit nuxt-viewport
Edit nuxt-viewport

Or locally:

  1. Clone this repository
  2. Install dependencies using yarn install or npm install
  3. Start development server using yarn dev or npm run dev

webAlly © Copyright 2024. All rights reserved.