nuxt-viewport

Nuxt️ プロジェクトにカスタムビューポートを定義する

機能

⚡️ MatchMedia API で高速かつ軽量 ⚡️
🕶 Cookieとユーザーエージェントからデバイスのビューポートを自動検出
👌 設定不要ですぐに開始
👴️ IE9+ をサポート

注意
このバージョンはNuxt 3とNuxt Bridge専用です。Nuxt 2の場合は1.0.1を参照してください。

クイックセットアップ

nuxt-viewport 依存関係をプロジェクトに追加する

npx nuxi@latest module add nuxt-viewport

nuxt-viewport を nuxt.config.js の modules セクションに追加する

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

トップレベルオプションを使用する

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

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

使用方法

<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: {{ $viewport.breakpoint }}</div>
  </div>
</template>

コンポーザブルを使用した使用方法

<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: {{ viewport.breakpoint }}</div>
  </div>
</template>

"@nuxt/bridge" を使用した使用方法

<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: {{ $viewport.breakpoint }}</div>
  </div>
</template>

設定

`breakpoints`

タイプ: オブジェクト

キーがビューポートの名前、値がビューポートのサイズであるオブジェクト。

タイプ: オブジェクト

Cookieのオプションを含むオブジェクト。詳細はhttps://www.npmjs.com/package/cookiejs#cookie-attributesを参照してください。

`defaultBreakpoints`

タイプ: オブジェクト
検出可能なデバイス: bot、desktop、mobile、tablet、tv

キーが検出されたデバイスの名前、値がブレークポイントキーであるオブジェクト。

`fallbackBreakpoint`

タイプ: 文字列
デフォルト: viewport

デバイスが検出されなかった場合に使用されるブレークポイントキー。

`feature`

タイプ: 'minWidth' | 'maxWidth'
デフォルト: 'minWidth'

CSSメディア機能。

デフォルト設定

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

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

      tablet: 768,
    },

    cookie: {
      expires: 365, // 365 days
      name: 'viewport',
      path: '/',
      sameSite: 'Strict',
      secure: true,
    },

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

    fallbackBreakpoint: 'desktop',

    feature: 'minWidth',
  },
  // ...
}

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`

タイプ: 文字列

現在のブレークポイント。

`viewport.breakpointValue`

タイプ: 数値

// Example using defaults.

viewport.breakpointValue('desktop') // Result: 1024.
viewport.breakpointValue('tablet') // Result: 768.
viewport.breakpointValue('mobile') // Result: 320.

`viewport.isGreaterThan`

タイプ: 真偽値

// Example: viewport.breakpoint is "mobile".

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

`viewport.isGreaterOrEquals`

タイプ: 真偽値

// Example: viewport.breakpoint is "mobile".

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

`viewport.isLessThan`

タイプ: 真偽値

// Example: viewport.breakpoint is "desktop".

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

`viewport.isLessOrEquals`

タイプ: 真偽値

// Example: viewport.breakpoint is "tablet".

viewport.isLessOrEquals('tablet') // Result: true.
viewport.isLessOrEquals('mobile') // Result: false.

`viewport.match`

タイプ: 真偽値

// Example: viewport.breakpoint is "tablet".

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

`viewport.matches`

タイプ: 真偽値

// Example: viewport.breakpoint is "mobileWide".

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

`viewport.queries`

タイプ: オブジェクト

生成されたメディアクエリを含むオブジェクト。

貢献

CodeSandBoxを使用してオンラインでこのモジュールに貢献できます

またはローカルで

このリポジトリをクローンする
yarn install または npm install を使用して依存関係をインストールする
yarn dev または npm run dev を使用して開発サーバーを起動する

ライセンス

MITライセンス