Vuetify 2.0の注目機能とNuxt.jsでの試し方

本日 [Vuetify v2.0.0 Arcadia](https://github.com/vuetifyjs/vuetify/releases) がリリースされました！
居ても立っても居られず、早速試してみました！

## 個人的注目機能
### VColorPicker
リファレンス：[VColorPicker](https://vuetifyjs.com/ja/components/color-pickers)
[vue-color](https://github.com/xiaokaike/vue-color)の使用を検討していた身としては、Vuetifyのコンポーネントとして提供されるのはありがたいです。

![color1](https://user-images.githubusercontent.com/9064066/61737442-d6d6d000-ad4d-11e9-8bc2-c85d5627b3e0.gif)
![color2](https://user-images.githubusercontent.com/9064066/61737445-d807fd00-ad4d-11e9-9e49-842c5fd02589.gif)

### VFileInput
リファレンス：[VFileInput](https://vuetifyjs.com/ja/components/file-inputs)
こちらも地味にVuetifyに今までなかったやつです。
「ファイルを選択」ボタンのカスタマイズは地味に面倒なので、大変ありがたいです。

![input1](https://user-images.githubusercontent.com/9064066/61737559-13a2c700-ad4e-11e9-8fbd-6fc57ae93cef.png)
![input2](https://user-images.githubusercontent.com/9064066/61737590-2a491e00-ad4e-11e9-8a16-11b1852016f5.png)

### VOverlay
リファレンス：[VOverlay](https://vuetifyjs.com/ja/components/overlays)
こちらもたまにcssで自力でやっていたので、楽になりますね。

![overlay1](https://user-images.githubusercontent.com/9064066/61737973-ed315b80-ad4e-11e9-97ef-051972f0e3ae.gif)
![overlay2](https://user-images.githubusercontent.com/9064066/61737979-eefb1f00-ad4e-11e9-9264-e7d30ea0eca1.gif)

## Nuxt.jsでVuetify 2.0を使う
素のvueの場合はvuecliでできるようですが、~~Nuxt.jsの場合は`@nuxt/vuetify`モジュールがまだv2.0.0に未対応なため、自力で導入する必要があります。~~
対応してました！→ [nuxt-community/vuetify-module](https://github.com/nuxt-community/vuetify-module)

下記の2種類の方法で利用可能です。

- ①nuxtのvuetify-moduleを利用する方法
- ②自分でpluginsに登録する方法

基本的には①で導入することをおすすめします。

## ①nuxtのvuetify-moduleを利用する方法
### プロジェクト作成
この例では`create nuxt-app`で新規に作成したプロジェクトを想定しています。

```bash
# ディレクトリ作成
mkdir vuetify2-example
# 移動
cd vuetify2-example

# プロジェクトの作成
yarn create nuxt-app
# Choose UI framework では、自力でVuetifyを導入するので、Noneを指定します
# 他の項目は任意です

# @nuxtjs/vuetifyを依存に追加
yarn add @nuxtjs/vuetify
```

### nuxt.config.jsでの設定
下記設定を追加します。

```nuxt.config.js
// 略
  devModules: ['@nuxtjs/vuetify'],
  vuetify: {
    theme: {
      dark: false
    }
  },
// 略
```

vuetifyの中にいろいろ設定できます。

### VColorPickerを表示してみる
適当に新コンポーネントを試してみましょう。

```vue:pages/index.vue
<template>
  <v-app>
    <v-color-picker></v-color-picker>
  </v-app>
</template>
```

以下のコマンドで起動して確認します。

```sh
yarn dev
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214526/5a180901-989d-d506-aa71-070f5c55b48a.png)
無事に起動できました！

## ②自分でpluginsに登録する方法
### プロジェクト作成
この例でも`create nuxt-app`で新規に作成したプロジェクトを想定しています。

```bash
# ディレクトリ作成
mkdir vuetify2-example
# 移動
cd vuetify2-example

# プロジェクトの作成
yarn create nuxt-app
# Choose UI framework では、自力でVuetifyを導入するので、Noneを指定します
# 他の項目は任意です

# vuetifyを依存に追加
yarn add vuetify
# アイコンを追加
yarn add @mdi/font -D
```

### Vuetify plugin
あとは以下の実装を追加するだけです。

```js:plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify)

export default ctx => {
  const vuetify = new Vuetify({
    theme: {
      dark: false // dark or lightはここで指定するようになった
    },
    icons: {
      iconfont: 'mdi' // iconを指定しないとチェックボックス等が正常に表示されない
    }
  })

  ctx.app.vuetify = vuetify
  ctx.$vuetify = vuetify.framework
}
```

`nuxt.config.js`に下記設定を追加します。

```js:nuxt.config.js
  plugins: [
    '@plugins/vuetify'
  ],
```