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

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

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時点で、自プロジェクトの修正をしてて気付いた所はこの辺ですが、他にも見つけたら追記します。

dojyorin
野生のどじょう。 趣味と業務効率化の一環でC#, JS, Arduinoをかじる。
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
ユーザーは見つかりませんでした