Vuetify のアップデート(v1.5.x => v2.x) with TypeScript and Webpack

本記事の立ち位置

ここの拡張版。

VuetifyとはVue.js用のUIフレームワークです。

相違点

• vue-cli を利用しない
• packageとwebpackを更新してアップデート
• サンプルプログラムを抜粋して記載

How to

1. packageのアップデート

• npm updateを利用してもvuetifyなどの一部パッケージが最新版にならない場合があります。これは既存のアプリを破壊（動かなく）してしまう可能性があると判断されているからです。
• それを抑えてなお破壊的な更新を行いたい場合はncuを利用しましょう！

$ npm update # まずは普通にアップデート
$ ncu # アップデートできるパッケージの確認
$ ncu -u # 破壊的アップデート

2. webpackの更新

• vuetifyをコンパイルするためにvuetify-loaderをインストールします。
• webpack-cli

# 以下はやってない人
$ npm i -g webpack webpack-cli 
$ exec $SHELL -l # コマンドプロンプトの再起動（linux, mac）
$ npm i -D vuetify-loader

webpack.config.js

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

let baseWebpack = {
    /* 略 */
    plugins: [
        new VuetifyLoaderPlugin()
    ],
    /* 略 */
};

module.exports = baseWebpack

3. Vuetify の読み込み

src/pluginsは作成する必要はありませんが、ライブラリは別ファイルで管理しておくと可読性が良くなります。

tsconfig.jsonへの設定も忘れずに

tsconfig.json

{
  ***
  "types": [
    "vuetify"
  ],
  ***
}     

src/plugins/vuetify.ts

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

Vue.use(Vuetify);

/*
// directiveも利用する場合
import { Touch } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
  directives: {
    Touch
  }
});
*/

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

src/main.ts

import Vuetify from './plugins/vuetify';
import App from './components/App'

new Vue({
    vuetify: Vuetify,
    template: '<App/>',
    components: {
        App
    }
}).$mount('#app')

以上！