AMG Solution

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

Vue入門
feels

こんにちは、樋口です。
 
今回は、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に設定を追加します。

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

プロジェクト構成

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

 sample-project
   |- .nuxt
   |- assets
   |- components
   |- layouts
   |- middleware
   |- node_modules
   |- pages
     |- device
       |- index.vue ← 今回修正ファイル
   |- plugins
   |- static
   |- language
   |- store
   |- .editorconfig
   |- .eslintrc.js
   |- .gitignore
   |- .prettierrc
   |- nuxt.config.js
   |- package.json
   |- package-lock.json
   |- README.md
   |- stylelint.config.js

Vueファイル

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

4行目:
「v-if=”$device.isDesktop”」の記載にによって、デスクトップの場合のみ表示を行うことができます。
 
7行目:
「v-if=”$device.isTablet”」の記載にによって、タブレットの場合のみ表示を行うことができます。
 
10行目:
「v-else」の記載にによって、モバイルの場合のみ表示を行うことができます。
 

実行結果

– PCブラウザからの表示
PCブラウザからの表示
– タブレットからの表示
※ PCから疑似的にタブレット表示で確認
タブレットからの表示
 
– スマホからの表示
※ PCから疑似的にスマホ表示で確認
スマホからの表示

最後に

今回紹介したライブラリを使用すれば、簡単に各デバイスの判定と、デバイスごとの表示の切り替えを行うことができます。機会あればぜひ試してみてください。
 
今後もNuxt.jsでの便利ライブラリについて紹介していけたらと思っています。
 
それではまた。
 
 
 
 
《関連記事》

feels recruit

HIGUCHI'S BLOG

樋口の記事

樋口の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

feelsでSFA・CRM
はじめました。
LOADING