# アップグレードガイド

# Vue-CLI 3 Vuetifyプラグインのインストール

// v1.5
// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'md',
})

// src/main.js
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'

Vue.config.productionTip = false

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

// v2.0
// src/plugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdi',
  },
});

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

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

# フルインストール

// v1.5

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/src/stylus/main.styl'

const opts = { ... }
Vue.use(Vuetify, opts)

new Vue(...).$mount('#app')

// v2.0

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

const opts = { ... }
Vue.use(Vuetify)

new Vue({
  vuetify: new Vuetify(opts)
}).$mount('#app')

# A-La-Carteのインストール - vuetify-loader

// v1.5

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/main.styl'

const opts = { ... }
Vue.use(Vuetify, opts)

new Vue(...).$mount('#app')

// v2.0

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

const opts = { ... }
Vue.use(Vuetify)

new Vue({
  vuetify: new Vuetify(opts)
}).$mount('#app')

# 通常のアクティベーター

<!-- v1.5 -->

<v-dialog>
  <v-btn slot="activator">...</v-btn>
</v-dialog>

<!-- v2.0 -->

<v-dialog>
  <template v-slot:activator="{ on }">
    <v-btn v-on="on">...</v-btn>
  </template>
</v-dialog>

# ネストしたアクティベーター

<!-- v2.0 -->

<v-menu>
  <template v-slot:activator="{ on: menu }">
    <v-tooltip bottom>
      <template v-slot:activator="{ on: tooltip }">
        <v-btn
          color="primary"
          dark
          v-on="{ ...tooltip, ...menu }"
        >
          Dropdown w/ Tooltip
        </v-btn>
      </template>
      <span>Im A ToolTip</span>
    </v-tooltip>
  </template>
</v-menu>

# v-app

• コンポーネントクラスは v- が先頭に追加されました。 例 .application → .v-application
• darkとlightのpropがアプリケーションテーマのバリエーションに影響を与えなくなりました

<!-- v1.5 src/App.vue -->

<template>
  <v-app dark>
    ...
  </v-app>
</template>

// v2.0 src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

export default new Vuetify({
  theme: { dark: true }
})

# v-alert

• アラートはデフォルトで表示されます

<!-- v1.5 -->

<template>
  <v-alert :value="true">
    ...
  </v-alert>
</template>

<!-- v2.0 -->

<template>
  <v-alert>
    ...
  </v-alert>
</template>

# v-bottom-nav

• v-bottom-nav から v-bottom-navigation に名前を変更しました

# v-bottom-navigation

• color プロパティは background-color になりました
• color プロパティがアクティブな <v-btn> の色に影響を与えるようになりました

# v-bottom-sheet-transition

• コンポーネントが削除されました Developer notes: API で明示的にリストされたことはありませんでした

# v-btn

• flat プロパティが text になりました
• round プロパティは roundedになりました
• 明示的なマージンはなくなりました

# v-card-media

• コンポーネントが削除されました

# v-carousel

• cycle プロパティはもはや暗黙のものではなく、画面が切り替わるように定義されなければなりません。

# v-chip

• value プロパティが activeアクティブになりました
• 値 は可視性を制御しなくなりました。 input イベントがクリックされたときに発生します
• selected プロパティは input-value または v-model になりました
• close イベントが click :close になりました

# v-data-iterator と v-data-table

データテーブル(およびイテレータ) は、使いやすく、より高度なユースケースでより柔軟に書き換えられるようになっています。 これにより、多くの破壊的変更が生じました。 これらのいくつかは両方のコンポーネント間で共有されますが、それぞれに固有のものもあります。

# 共有内容

• disable-initial-sort が削除されました。 どちらのコンポーネントも最初にデータをソートしなくなります。 sort-by (または options) prop を使用してソートします
• filter プロパティが削除されました。 代わりに custom-filter を使用します。 これは、カスタムフィルタリングを混乱させないようにするための変更です
• custom-filterのシグネチャが、(items: object[], search: string, filter: Filter): object[] から、(value: any, search: string, item: any) => booleanに変更されました。
• pagination プロパティが削除されました。 Instead use the separate props such as page, sort-by, etc. If you want to provide a single object you can use the new options prop instead. NOTE: The options prop has a different object structure than pagination. Check API docs for details
• total-items プロパティ が server-items-length に名前を変更されました
• hide-actions prop が hide-default-footer に改名されました。 また、ページあたりの表示アイテムも変更されなくなります
• デフォルトフッターに関連する props が footer-props に移動されました。 これらは次のとおりです:
• prev-icon
• next-icon
• rows-per-page-items → items-per-page-options
• rows-per-page-text → items-per-page-text
• expand プロパティが削除されました

# v-data-iterator

• content-tag, content-props, content-class プロパティが削除されました。 代わりに、デフォルトのスコープ付きスロットを使用して、意図したマークアップを実装します。

# v-data-table

• items スロットが item に名前を変更されました
• headers スロット名を header に変更しました
• item スロット (および header) では、 <tr> 要素を定義する必要があるようになりました。 以前はオプションでした
• expand スロットを expanded-item に変更しました It no longer includes an expansion transition, and the slot is inside the <tr> element so that you can define your own <td> columns. To get back to a similar look as in 1.5, you will need a <td> with colspan equal to the number of columns in your header
• hide-header が hide-default-header に改名されました
• select-all が show-select に改名されました。 ( item や body など) 内部行レンダリングを上書きするスロットを定義していない限り、各アイテム行にチェックボックスをレンダリングします。
• デフォルトヘッダに関連する props が header-props に移動されました。 これらは次のとおりです:
• sort-icon

# v-expansion-panel et a

• 多くのコンポーネントが名前を変更され、props が移動されました
• v-expansion-panel → v-expansion-panels
• v-expansion-panel-content → v-expansion-panel
• 新しいコンポーネント
• v-expansion-panel-header
• v-expansion-panel-content

<!-- v1.5 -->

<v-expansion-panel>
  <v-expansion-panel-content
    v-for="(item,i) in 5"
    :key="i"
  >
    <template v-slot:header>Item</template>
    <v-card>
      ...
    </v-card>
  </v-expansion-panel-content>
</v-expansion-panel>

<!-- v2.0 -->

<v-expansion-panels>
  <v-expansion-panel
    v-for="(item,i) in 5"
    :key="i"
  >
    <v-expansion-panel-header>
      Item
    </v-expansion-panel-header>
    <v-expansion-panel-content>
      <v-card>
        ...
      </v-card>
    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

# v-footer

• 他の類似した MD コンポーネントと一致するように明示的なパディングがあるようになりました。 padless プロパティまたはヘルパークラスで削除できます。 class="pa-0"

# v-jumbotron

• コンポーネントが削除されました

# v-list et a

• 多くのコンポーネントが名前を変更されました
• v-list-tile → v-list-item
• v-list-tile-action → v-list-item-action
• v-list-tile-avatar → v-list-item-avatar
• v-list-tile-content → v-list-item-content
• v-list-tile-title → v-list-item-title
• v-list-tile-sub-title → v-list-item-subtitle
• avatar プロパティが削除されました

# v-list-group

• アクティベータースロットで v-list-items を使用できなくなりました
• リスナーはアクティベーターのために内部 v-list-item に渡されます
• v-list-item-content/v-list-item-title などを代わりに使用します

# v-navigation-drawer

• デフォルトの幅は300pxから256pxに変更されました。 width prop を使用して調整できます。

# v-select - v-autocomplete - v-combobox - v-overflow-btn

• 適切な a11y サポートのために、 attributes と listeners を item スロットに渡します (他の実装に一致するタイルから分割)。

<!-- v1.5 -->

<v-select>
  <template v-slot:item="{ item, tile }">
    <v-list-tile v-bind="tile">
...
    </v-list-tile>
  </template>
</v-select>

<!-- v2.0 -->

<v-select>
  <template v-slot:item="{ item, attrs, on }">
    <v-list-item v-bind="attrs" v-on="on">
...
    </v-list-item>
  </template>
</v-select>

{ tile } のアイテムスコープ付きスロット値が { attrs, on }になりました。 v-menu アクティベータースロットに似ています。

# v-select

• デフォルトの autocomplete のonがなくなりました。

# v-speed-dial

• CSS経由でアクティベーターとのスワップが推定されなくなりました
• アクティベータースロットは将来modelを提供します

<!-- v1.5 -->

<v-speed-dial>
  <template v-slot:activator>
    <v-btn
      dark
      fab
    >
      <v-icon>account_circle</v-icon>
      <v-icon>close</v-icon>
   </v-btn>
  </template>
</v-speed-dial>

<!-- v2.0 -->

<v-speed-dial v-model="fab">
  <template v-slot:activator>
    <v-btn
      dark
      fab
    >
      <v-icon v-if="fab">account_circle</v-icon>
      <v-icon v-else>close</v-icon>
    </v-btn>
  </template>
</v-speed-dial>

# v-tabs

• color プロパティは background-color になりました。 既定のテキストとスライダーの色に影響を与えるようになりました
• 様々なクラス名が変更されています
• v-tab__div を削除しました。 v-tab を使用します
• v-tab__item → v-tab
• v-tabs__slider → v-tabs-slider
• v-tabs__bar → v-tabs-bar

# v-tabs-items

• ネストされた場合、暗黙的に v-tabsモデルを継承しなくなりました。 :valueまたはv-modelが明示的にバインドされている必要があります。

<!-- v1.5 -->

<v-tabs v-model="tabs">
  ...
  <v-tabs-items>
    ...
  </v-tabs-items>
</v-tabs>

<!-- v2.0 -->

<v-tabs v-model="tabs">
  ...
  <v-tabs-items v-model="tabs">
    ...
  </v-tabs-items>
</v-tabs>

開発者の注意事項: tabs-items コンポーネントは提供する必要はなく、カスタム実装にのみ必要です。

# v-text-field

• mask propと機能は削除されました。 代わりに、 vue-the-mask などのサードパーティ製ライブラリを使用できます。
• prepend-icon-cb, prepend-inner-icon-cb, append-icon-cb, および append-outer-icon-cb プロパティが削除されました。 代わりに @click:prepend, @click:prepend-inner, @click:append, および @click:append-outer イベントをそれぞれ使用できます。

# v-text-field - v-select - v-textarea - v-autocomplete - v-combobox

• box のプロパティが filledになりました

<!-- v1.5 -->

<v-text-field box></v-text-field>

<!-- v2.0 -->

<v-text-field filled></v-text-field>

# v-text-field - v-select - v-textarea - v-autocomplete - v-combobox - v-btn - v-alert

• outline propがoutlinedになりました。

<!-- v1.5 -->

<v-btn outline></v-text-field>
<v-autocomplete outline></v-autocomplete>
<v-alert outline></v-alert>

<!-- v2.0 -->

<v-btn outlined></v-text-field>
<v-autocomplete outlined></v-autocomplete>
<v-alert outlined></v-alert>

# v-toolbar

• 既存のスクロールテクニックと app 機能はすべて非推奨となり、 v-app-bar に移動しました。
• v-toolbar-side-icon → v-app-bar-nav-icon