LoginSignup
35

More than 3 years have passed since last update.

Vuetify 1.x to 2.0 ココだけ直せばとりあえずは動く

Last updated at Posted at 2019-07-26

jsdelivr からvuetify@latestをロードしている自前のWebページが、今朝見たら全滅ではないですか。

何事かと思ったら Vuetify 2.0 がリリースされていたんですね。

ココだけ直せばとりあえずは動く

Vuetifyインスタンス

1.x
Vue.use(Vuetify);
new Vue({
    ...
});
2.0
new Vue({
    vuetify: new Vuetify(),
    ...
});

これが一番大きな変更じゃないかなぁ。

Vuetifyを適用させる場合、1.xではVue.use()グローバルメソッドでVuetifyオブジェクトを展開していました。

2.0からはnew Vue()コンストラクタのオプションvuetifyプロパティにnew Vuetify()コンストラクタでインスタンスを代入するよう変更されました。

v-toolbar

1.x
<v-toolbar app>
    <v-toolbar-title>たいとる</v-toolbar-title>
</v-toolbar>
2.0
<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

1.x
<v-btn flat>ぼたん</v-btn>
2.0
<v-btn text>ぼたん</v-btn>

フラットスタイルを適用させる際の<v-btn flat>は廃止され、<v-btn text>となりました。

なお<v-btn>以外の部品をフラット化させるのには従来通りflat属性を使用するので、一括置換でうっかり変えてしまわないように。

v-menu

1.x
<v-menu>
    <v-btn slot="activator">ぼたん</v-btn>
    <v-card>おーぷん</v-card>
</v-menu>
2.0
<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

1.x
<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>
2.0
<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

1.x
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
2.0
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

デフォルトのアイコンフォントがGoogleの物からMDIの物に変更されています。
これに伴い<v-icon>で指定していたアイコン名についてmdi-プレフィクスが必要なケースが発生します。

例1.x
<v-icon>home</v-icon>
例2.0
<v-icon>mdi-home</v-icon>

備考

2019/07/26時点で、自プロジェクトの修正をしてて気付いた所はこの辺ですが、他にも見つけたら追記します。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35