@nuxtjs/vuetify v2.0 での変更点

@nuxtjs/vuetify とは

---

@nuxtjs/vuetify とは

• Nuxt.js のモジュールの1つ
• Vuetify を自動で読み込む
• nuxt.config.js でテーマの設定ができる

Nuxt.js + Vuetify に必須のビルドモジュール

---

nuxt.config.js の書き方

v1.x までの場合

nuxt.config.js

export default {
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    '@nuxtjs/vuetify'
  ],
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    customVariables: [
      '~/assets/variables.sass'
    ],
    theme: {
      options: {
        customProperties: true
      },
      dark: true,
      themes: {
        dark: {
          ...
        }
      }
    }
  }
}

---

インストール方法

1. npx create-nuxt-app
   して、
   ? Choose UI Framework: Vuetify.js
   を選ぶと自動でセットアップ
2. 後からインストールする場合は

shell

$ npm i -D @nuxtjs/vuetify

---

v2.0 へのバージョンアップ

---

v2.0 での変更点

• 記事公開時点では、 v2.0.0-alpha.4
• Tree shaking が常時 ON に
  • nuxt build したときだけでなく、
    nuxt でも Tree shaking するようになった
• SASS/SCSS の変数がインジェクトされるタイミングが変わった
• fibers ライブラリが optional dependency に
  • node-gyp でのビルドが不要に

詳しくは GitHub の v2.0@alpha - Module revamp #177

---

今までの @nuxtjs/vuetify

• nuxt 時 → ビルド済みバンドル
  • ~vuetify/dist/vuetify.js
  • ~vuetify/dist/vuetify/css
    • SASS/SCSS 変数が無視される
• nuxt build 時 → ソースからビルド
  • ~vuetify/lib/index.js
  • ~vuetify/src/styles/main.sass
    • SASS/SCSS 変数が有効になる

---

v2.0 以降の @nuxt/vuetify

• nuxt, nuxt build どちらもソースから
• SASS/SCSS 変数の変更がちゃんと反映される
• ただ、常に Tree shaking されるので、ディレクティブ、トランジション、 lazy ローディングするコンポーネントは自分で指定が必要

---

Tree shaking は何が嬉しいの？

• Vuetify はコンポーネント数が多い
  • すべてバンドルすると、ファイルサイズが大きくなる
• Webpackでは、実際に使うソースファイルだけビルドに含める機能がある
  • Tree shaking という
  • 必要最低限だから、コンパクトになる

---

バージョンアップ時の注意

• nuxt.config.js での書き方が変わった
• fibers がオプショナルになった
  • よく分からないが、自分の場合
    Cannot find module './build'
    エラーが出て実行できなくなった
  • fibers のビルドの問題だと思われる
  • rm -rf node_modules した後、
    npm i し直したら治った
  • npm rebuild でも治るかもしれない

---

v2.0 以降の nuxt.config.js の書き方

nuxt.config.js

export default {
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    '@nuxtjs/vuetify'
  ],
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    customVariables: [
      '~/assets/variables.sass'
    ],
    frameworkOptions: {
      theme: {
        options: {
          customProperties: true
        },
        dark: true,
        themes: {
          dark: {
            ...
          }
        }
      }
    }
  }
}

---

まとめ

---

まとめ

• @nuxtjs/vuetify 使うべき
• v2.0 に上げてしまおう
  • npm i -D @nuxtjs/vuetify@next
• Nuxt.js + Vuetify でハッピーコーディングライフを！