Vue.jsベースのフレームワーク！ Nuxt.jsプラグイン《WEBやスマホなどのデバイス判定》

#JavaScript #Nuxt.js #Vue.js

記事をシェア：

コピー

こんにちは、樋口です。

今回は、Nuxt.jsからライブラリを読み込むだけで簡単にデバイスの判定をできるようにできる@nuxtjs/deviceについてご紹介します。

使用するライブラリ

今回は下記ライブラリを使用して説明をしていきます。

Vue.js: 3.9.2
Nuxt.js: 2.12.2
@nuxtjs/device: 2.0.1

@nuxtjs/deviceの追加

初めにコマンドプロンプトで、使用するNuxt.jsのプロジェクトフォルダまで移動します。移動後、以下のコマンドを実行します。

npm i @nuxtjs/device

コマンド実行画面

これで対象のプロジェクトに、ライブラリを追加することができました。

次に実際のライブラリの使用方法について解説していきます。

nuxt.config.js設定

次に、nuxt.config.jsに設定を追加します。

buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/device',　← 記載を追加
    '@nuxtjs/eslint-module'
  ],

３行目：
@nuxtjs/deviceライブラリの使用に必要な記載となります。

プロジェクト構成

今回は下記のプロジェクト構成で作業を行っていきます。

Vueファイル

今回サンプル用に作成した、Vueファイルを下記に記載します。

– index.vue

<template>
  <div class="container">
    <h1 style="text-align: center; margin-top: 20px;">device</h1>
    <div style="font-size: 22px; margin-top: 10px;" v-if="$device.isDesktop">
      Desktop
    </div>
    <div style="font-size: 22px; margin-top: 10px;" v-else-if="$device.isTablet">
      Tablet
    </div>
    <div style="font-size: 22px; margin-top: 10px;" v-else>
      Mobile
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

４行目：
「v-if=”$device.isDesktop”」の記載にによって、デスクトップの場合のみ表示を行うことができます。

７行目：
「v-if=”$device.isTablet”」の記載にによって、タブレットの場合のみ表示を行うことができます。

１０行目：
「v-else」の記載にによって、モバイルの場合のみ表示を行うことができます。