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

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

More than 1 year has passed since last update.

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の場合
img_20190530_1.png

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

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

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

img_20190530_3.png

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

shikigamix
最近Vue.js、React、Angularの比較にハマってます。質問などありましたら可能な限りお答えしたいと思います。
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
ユーザーは見つかりませんでした