Help us understand the problem. What is going on with this article?

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

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

by kulikala
1 / 14

@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 でハッピーコーディングライフを!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした