こんにちは、いつもは気になる記事を紹介しているのですが、

今回は自分の備忘録としてvuetifyに関して記載したいと思います。

 

現在、参画している案件でvueを使用しているのですが、

システムが複雑だったことや割く時間がなかったことからずっと後回しになっていた

vuetifyのバージョンアップを行うことになり、まずは１バージョンだけ上げるという事になりました。

しかし、最新バージョンの手前のバージョンに上げるという方法が意外に無く、

いろいろ調べても、公式のドキュメントを見ても理解できず、

詰まりに詰まったため、実際に行った手順を今後のために以下に残します。

 

【手順】

１．PCにVue CLIをインストール

コマンド：npm install -g @vue/cli

２．vueのプロジェクトを新規作成

コマンド：vue create my-project

３．vuetifyをインストール

コマンド：vue add vuetify

４．package.jsonの修正

現在開発しているシステムのpackage.jsonに新規で作成したプロジェクトのpackage.jsonに記載されている

vuetify関連の項目を更新もしくは削除。

５．Vuetify用のプラグインファイルsrc/plugins/vuetify.jsを以下の内容で作成

optsの中身はiconやテーマカラーなどを設定する。

as constをつけないと型エラーになるため、注意が必要。

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

Vue.use(Vuetify)

const opts = {
icons: {
    iconfont: 'mdi',
  }
}  as const

export default new Vuetify(opts)

６．src/main.jsを修正

vuetifyのimportを追加し、new Vue にvuetifyを追加する。

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

７．個々のコンポーネントを修正

削除や変更になっているコンポーネントを修正する。

特に注意が必要なのはv-data-table。

slotの部分がheadersやitemsからheaderやitemに変更になっていたり、

paginationがなくなってしまっているので、optionsに書き換えるなど、

様々な変更があるため、注意が必要です。

 

以上が私がvuetifyアップデート時に行った手順になります。

だいぶ端折っているため、わかりにくい箇所があるかと思いますが、

今回詰まった部分を記載することで、どなたかのヒントになればと思います。

 

参考ページ

https://v2.vuetifyjs.com/ja/getting-started/upgrade-guide/#v-data-iterator-3068-v-data-table