前置き

これまでずっとGoogleAppsScript上でのみjavascriptを扱ってきた初心者ですが、今年の夏からFirebase+nuxt.js+Vuetifyでウェブアプリの作成を目指して勉強しています。
GASしか知らないために、いろいろと勉強することが多すぎて大変なのですが、特にVuetifyに関するネット記事はGASに関する記事と比べてあまり多くなくて困っているところです。（英語もほとんど読めないので・・・）

今回はレスポンシブデザインにおけるブレイクポイントをカスタマイズする方法が確立できましたので備忘録を兼ねて投稿してみたいと思います。（Qiita初投稿です！）

https://v2.vuetifyjs.com/ja/customization/breakpoints/
上記の公式ガイドの「使い方」のところに「独自のブレークポイントで閾値をピクセル数で定義できます」とあり、方法も説明されていますが簡素な記述のためそのまま使える情報ではありませんでした。
それで、タイトルに記載したとおり、バージョン指定のNuxt+Vuetifyしかも@nuxtjs/vuetifyの場合という限定された環境でのお話にはなりますが、私のような初心者の方々に参考になればと思います。（よく理解できているから投稿しているのではなく、結果として望み通りにできたのでその時の設定内容を投稿するというスタンスです。）

今回の環境は下記です。
Windows10 / VScode / node.js 10.22.0

package.json

"dependencies": {
    "@nuxtjs/axios": "^5.12.2",
    "core-js": "^3.6.5",
    "firebase": "^8.0.0",
    "firebase-tools": "^8.14.1",
    "nuxt": "^2.14.6",
    "save": "^2.4.0",
    "vuexfire": "^3.2.4"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.11.2",
    "eslint-config-prettier": "^6.12.0",
    "eslint-plugin-prettier": "^3.1.4",
    "prettier": "^2.1.2"
  }

本題

やりたかったこと

Vuetifyのブレイクポイントの初期値はけっこうざっくりしているので、iPhone,iPad縦,iPad横でデザインを切り替えるために、

xs: 0,
sm: 420px,
md: 840px,
lg: 1260px,
xl: 1680px

という形で独自の数値でブレイクポイントを設定したいと思いました。そのために必要なことは以下の３つでした。

Step1 : assetsフォルダ内のvariables.scssに下記内容を記載する

assets/variables.scss

  @import '~vuetify/src/styles/styles.sass';

  $grid-breakpoints: map-merge($grid-breakpoints, (
    xs: 0,
    sm: 420px,
    md: 840px,
    lg: 1260px,
    xl: 1680px
  ))

Step2 : pluginsフォルダにjsファイルを下記内容で新規作成する

例ではvuetify.jsという名称にしています任意で名前を決めることができます。

plugins/vuetify.js

import Vuetify from 'vuetify/lib'

export default new Vuetify({
  breakpoint: {
    thresholds: {
      xs: 0,
      sm: 420,
      md: 840,
      lg: 1260,
      xl: 1680,
    },
    scrollBarWidth: 24,
  },
})

Step3 : nuxt.config.js内のpluginsにパスを記入し、Step2で作成したファイルを読み込む

nuxt.config.js

  plugins: [
    '~/plugins/vuetify.js',
  ],

私の環境ではすでにplugins内に、
'~/plugins/firebase.js',
'~/plugins/firebase.auth.js',
が存在していましたので、3行目に追加する形で、
'~/plugins/vuetify.js',を記入しました。

それで私の場合の最終結果はこうでした。

nuxt.config.js

  plugins: [
    '~/plugins/firebase.js',
    '~/plugins/firebase.auth.js',
    '~/plugins/vuetify.js',
  ],

まとめ

以上の手順を踏むと、独自の数値がブレイクポイントに反映されるようになりました。

なおstep1に出てくるvariables.scssに書き込むとCSSを独自に設定できるという情報はネットにもたくさん出てきました。ですが今回のようにVuetifyにデフォルトで設定されている特殊な数値に手を加えたい場合には、variables.scssに書き込むだけでなく、Step2と3が必要でした。

ネットでこのあたりのことを調べると、下記のＱＡがよくヒットします。
https://www.366service.com/jp/qa/e9b29ca348c2d046abf87b6cd7baf757
このベストアンサーは詳しい人が見れば、どうすればよいのかすぐに分かるのでしょうけど、私のような初心者で、なおかつ環境が少し違ったこともあり、すぐに役立つ情報ではありませんでした。とはいえこれをヒントに試行錯誤し、やりたかったことがなんとか自分の環境で実現できましたので、上記ＱＡには感謝しています。

もっと勉強してnuxtやvuetifyを使いこなせるようになりたいです。そしてQiitaにはいつもお世話になっていますので、貴重な情報を共有して下さる皆様方にも感謝しています。

今回の件について、どんなことでも構いませんので、先輩方の知見の中から"知っておくとためになりそうな情報"がもしありましたら、教えていただけるなら幸いです。

【Vuetify公式ガイド】
https://v2.vuetifyjs.com/ja/

【検索用キーワード】
$vuetify.breakpoint
BreakPoints
ブレークポイント