jsdelivr からvuetify@latest
をロードしている自前のWebページが、今朝見たら全滅ではないですか。
何事かと思ったら Vuetify 2.0 がリリースされていたんですね。
ココだけ直せばとりあえずは動く
Vuetifyインスタンス
Vue.use(Vuetify);
new Vue({
...
});
new Vue({
vuetify: new Vuetify(),
...
});
これが一番大きな変更じゃないかなぁ。
Vuetifyを適用させる場合、1.xではVue.use()
グローバルメソッドでVuetify
オブジェクトを展開していました。
2.0からはnew Vue()
コンストラクタのオプションvuetify
プロパティにnew Vuetify()
コンストラクタでインスタンスを代入するよう変更されました。
v-toolbar
<v-toolbar app>
<v-toolbar-title>たいとる</v-toolbar-title>
</v-toolbar>
<v-app-bar app>
<v-toolbar-title>たいとる</v-toolbar-title>
</v-app-bar>
今まで<v-toolbar app>
としてきたアプリケーションバーは廃止されました。
2.0からは<v-app-bar app>
とする事で動くようになります。
ちなみに<v-toolbar>
自体は廃止された訳ではなく、コンテンツ内のツールバーは従来通りこちらを使います。
なお、バー内の部品に関してはどちらも共通で、引き続き<v-toolbar-title>
や<v-toolbar-items>
などを使います。
v-btn
<v-btn flat>ぼたん</v-btn>
<v-btn text>ぼたん</v-btn>
フラットスタイルを適用させる際の<v-btn flat>
は廃止され、<v-btn text>
となりました。
なお<v-btn>
以外の部品をフラット化させるのには従来通りflat
属性を使用するので、一括置換でうっかり変えてしまわないように。
v-menu
<v-menu>
<v-btn slot="activator">ぼたん</v-btn>
<v-card>おーぷん</v-card>
</v-menu>
<v-menu>
<template #activator="activator">
<v-btn v-on="activator.on">ぼたん</v-btn>
</template>
<v-card>おーぷん</v-card>
</v-menu>
<v-btn>
からslot
属性が削除されたことにより、<template>
タグでラップしactivator
を明示的にバインドさせる事が必要になりました。
v-list
<v-list>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>たいとる</v-list-tile-title>
<v-list-tile-subtitle>さぶたいとる</v-list-tile-subtitle>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list>
<v-list-item>
<v-list-item-content>
<v-list-item-title>たいとる</v-list-item-title>
<v-list-item-subtitle>さぶたいとる</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
リスト内の欄を構成する<v-list-tile-***>
系は全部<v-list-item-***>
へ変更されました。
ただし、構文が変わっただけで内容はほとんど変わっていません。
iconfont
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
デフォルトのアイコンフォントがGoogleの物からMDIの物に変更されています。
これに伴い<v-icon>
で指定していたアイコン名についてmdi-
プレフィクスが必要なケースが発生します。
<v-icon>home</v-icon>
<v-icon>mdi-home</v-icon>
備考
2019/07/26時点で、自プロジェクトの修正をしてて気付いた所はこの辺ですが、他にも見つけたら追記します。