@nuxtjs/vuetify で Vuetify を v2.0 にアップデートする

@nuxtjs/vuetify を使用して導入している Vuetify のバージョンアップを行ったのでメモ

バージョン

0.5.5 → 2.0.0-beta.0 に。
fibar が私の環境ではインストールできなかったため、
fibar が optionalDependencies になる @nuxtjs/vuetify@2.0.0-beta.0 を使用。

@nuxtjs/vuetify の変更点

v2.0@alpha - Module revamp

frameworkOptions

Vuetify 側の設定と @nuxtjs/vuetify 側の設定が分けられたようです。
@nuxtjs/vuetify の設定を frameworkOptions に移動する必要がありました。

nuxt.config.js

module.exports = {
  vuetify: {
    frameworkOptions: {
      icons: {
        iconfont: 'md',
        values: {}
      }
    },
    customVariables: ['path/to/customize.scss']
  },
}

defaultAssets

0.5.5 では materialIcons という Material Icons を自動で導入してくれるプロパティがありましたが、
defaultAssets というプロパティに置き換わりました。
諸事情あってCDNではなくローカルサーバーに置いたアイコンを使いたかったのでOFFに。

module.exports = {
  modules: [
-    ['@nuxtjs/vuetify', { materialIcons: false }]
+    ['@nuxtjs/vuetify', { defaultAssets: false }]
  ]
}

Vuetify v2.0 の変更点

ここからは Vuetify 側の変更点で引っかかった点を記述

コンポーネントや props の名前・型変更

変更点は マイグレーションガイド にまとまっていますが、大部分のコンポーネントに命名変更がかかっています。

特に data-tables は変更点が多く、名前だけでなく構造も変わっているものがあります。
options.sortBy といったソートの設定が、複数カラムのソートに対応した影響か配列しか受け付けなくなっていたのは若干詰まりました。

// data-tables の options
{
  page: number
  itemsPerPage: number
  sortBy: string[]
  sortDesc: boolean[]
  groupBy: string[]
  groupDesc: boolean[]
  multiSort: boolean
  mustSort: boolean
}

data-tables の headerCell

v1.5 の data-tables に存在した headerCell スロットにあたる機能が v2.0 では無くなっているようです。
代わりに header.<name> で各ヘッダーを個別にカスタマイズできるようになっています。

私のプロジェクトではこの name が可変のテーブルを作っていたので header.<name> を
あらかじめ設定しておくことができず、v-slot:header でヘッダー丸ごと上書きする必要がありました。

<template v-slot:header="{ props: { headers, options }, on: { sort } }">
  <thead>
    <tr>
      <th
        v-for="(header, index) in headers"
        :key="index"
        :class="['column sortable',
                 options.sortDesc[0] ? 'desc' : 'asc',
                 header.value === options.sortBy[0] ? 'active' : '',
                 header.align == null ? 'text-left' : '',
                 header.align === 'center' ? 'text-center' : '',
                 header.align === 'end' ? 'text-right' : '']"
        @click="sort(header.text)"
      >
        <!-- 中身 -->
      </th>
    </tr>
  </thead>
</template>

こんな感じでクラスやクリックイベントを元と近い挙動になるように設定。
全くスマートではないが、他に良いやり方が見つからず。