Vuetify2.0のBeta版を使ってみる

Vuetify2.0を試してみたところVuetify1.5系のコードを持って行ったら全然動かなかったのでVuetify2.0を使う上で書き換えなければいけない部分を現時点で調査ができてる範囲でレポート

公式ドキュメント

まずこれが全然参考にならないのが大きな関門。サイトドメインはnext.vuetifyjs.comとなっているけれどもどうやらその内容の大半は1.x系の内容のコピーからアップデートされていない様子

githubのリリースノート

どうやらこれが正規の以降ガイドな模様

const opts = { ... }
-Vue.use(Vuetify, opts)
+Vue.use(Vuetify)
-new Vue(...).$mount('#app')
+new Vue({
+  vuetify: new Vuetify(opts)
+}).$mount('#app')

こんな風にオプション情報の指定方法を変えろとの事

またテーマについても

const opts = {
-  dark: true,
  theme: {
-    primary: '...',
+    dark: true,
+    themes: {
+      light: {
+        primary: '...',
+        ...
+      },
+      dark: {
+        primary: '...',
+        ...
+      }
+    }
  }
}

の様にprimaryなどの定義はthemes > light,darkの中に定義しろとの事

ただしこれでも上手くいかない
ブラウザコンソールでエラーを確認したところv-appが定義されてないみたいなエラー

githubのリリースノートにたどり着く以前に試した

  components: {
    VApp,
  },

をoptsに追記してみるがこれもダメ

というか実はこの書式はVue.use(Vuetify...に以下の様に配置した場合themeカラーは使えなかったものの
ボタン表示まではできていたので再度componentsだけこっちに移動

Vue.use(Vuetify, {
  components: {
    VApp,
  },
}

全体としては以下の様に書けば動作した

main.js

import Vue from 'vue'
import App from './App.vue'
import colors from 'vuetify/es5/util/colors'
import 'vuetify/dist/vuetify.min.css'

import Vuetify, {VApp,VBtn} from 'vuetify/lib'
const VuetifyComponents = {
  components: {
    VApp, VBtn,
  },
}

Vue.use(Vuetify, VuetifyComponents)

const opts = {
  theme: {
    dark: false,
    themes: {
      light: {
      },
      dark: {
      }
    }
  }
}

new Vue({
  vuetify: new Vuetify(opts),
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <v-app>
    <div class="text-xs-center">
      <v-btn color="primary">Primary</v-btn>
      <v-btn color="secondary">Secondary</v-btn>
      <v-btn color="accent">Accent</v-btn>
    </div>
  </v-app>
</template>

opts.theme.dark===falseの場合

opts.theme.dark===trueの場合

opts.theme.dark===falseでthemesを以下の様に変えてみた場合

    themes: {
      light: {
        primary: colors.green.base,
        secondary: colors.green.darken4,
        accent: colors.purple.base,
      },
...

最初の触りとしてこれまでできれば移行は視野に入れられるのかなという感じ