Nuxt + Vuetify2.0 の環境構築

create-nuxt-appのデフォルトのVuetifyで構築をしていましたが
公式ドキュメントをみると若干コードが違う...。

実は、create-nuxt-appでVuetifyを構築するとversion 1.0になるらしく、コードが公式と異なってきます。
なのでVuetifyを入れた後@nuxtjs/vuetifyをアップグレードする必要があります。

今回は一から構築してみたので書き残しておきます。

## 環境構築

オプションで追加する点としては、prettierとeslint今回は入れてみました。
そしてVuetifyは後から入れる感じでいきます。

```bash
yarn global add create-nuxt-app
mkdir mysite && cd $_
create-nuxt-app .
✨  Generating Nuxt.js project in .
? Project name vuetify2
? Project description My peachy Nuxt.js project
? Author name user name
? Choose the package manager Yarn
? Choose UI framework (Use arrow keys)
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools ESLint, Prettier
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)

# この後入れたいものをinstallします。pugとstylusとvuetify
yarn add pug pug-plain-loader stylus stylus-loader @nuxtjs/vuetify

# 起動 !!
yarn dev
```

VSCodeでセーブ時にフォーマットかけるのがオススメですがフォーマットをprettierにしないとprettierやeslintから怒られたりするので気をつけてください。

## `nuxt.config.js`を書き換える

```js:nuxt.config.js
// ...
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' // ここを追加
      }
    ]
// ...

  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxtjs/vuetify' //　ここを追加
  ],
// ...
```

## `layouts/default.vue`を書き換える

```vue:/layouts/default.vue
<template>
  <div>
    <nuxt />
  </div>
</template>
```

↓

```vue:/layouts/default.vue
<template>
  <v-app>
    <nuxt />
  </v-app>
</template>
```

## 実際にVuetifyのコードを書いてみる。
- 公式の記事: [Vuetifyのtodolist](https://vuetifyjs.com/en/styles/transitions#todo-list)

```vue:/pages/index.vue
<template>
  <v-container style="max-width: 500px">
    <v-text-field
      v-model="task"
      label="What are you working on?"
      solo
      @keydown.enter="create"
    >
      <v-fade-transition v-slot:append>
        <v-icon
          v-if="task"
          @click="create"
        >
          add_circle
        </v-icon>
      </v-fade-transition>
    </v-text-field>

    <h2 class="display-1 success--text pl-4">
      Tasks:&nbsp;
      <v-fade-transition leave-absolute>
        <span :key="`tasks-${tasks.length}`">
          {{ tasks.length }}
        </span>
      </v-fade-transition>
    </h2>

    <v-divider class="mt-4"></v-divider>

    <v-row
      class="my-1"
      align="center"
    >
      <strong class="mx-4 info--text text--darken-3">
        Remaining: {{ remainingTasks }}
      </strong>

      <v-divider vertical></v-divider>

      <strong class="mx-4 black--text">
        Completed: {{ completedTasks }}
      </strong>

      <div class="flex-grow-1"></div>

      <v-progress-circular
        :value="progress"
        class="mr-2"
      ></v-progress-circular>
    </v-row>

    <v-divider class="mb-4"></v-divider>

    <v-card v-if="tasks.length > 0">
      <v-slide-y-transition
        class="py-0"
        group
        tag="v-list"
      >
        <template v-for="(task, i) in tasks">
          <v-divider
            v-if="i !== 0"
            :key="`${i}-divider`"
          ></v-divider>

          <v-list-item :key="`${i}-${task.text}`">
            <v-list-item-action>
              <v-checkbox
                v-model="task.done"
                color="info darken-3"
              >
                <template v-slot:label>
                  <div
                    :class="task.done && 'grey--text' || 'text--primary'"
                    class="ml-4"
                    v-text="task.text"
                  ></div>
                </template>
              </v-checkbox>
            </v-list-item-action>

            <div class="flex-grow-1"></div>

            <v-scroll-x-transition>
              <v-icon
                v-if="task.done"
                color="success"
              >
                check
              </v-icon>
            </v-scroll-x-transition>
          </v-list-item>
        </template>
      </v-slide-y-transition>
    </v-card>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      tasks: [
        {
          done: false,
          text: 'Foobar',
        },
        {
          done: false,
          text: 'Fizzbuzz',
        },
      ],
      task: null,
    }),

    computed: {
      completedTasks () {
        return this.tasks.filter(task => task.done).length
      },
      progress () {
        return this.completedTasks / this.tasks.length * 100
      },
      remainingTasks () {
        return this.tasks.length - this.completedTasks
      },
    },

    methods: {
      create () {
        this.tasks.push({
          done: false,
          text: this.task,
        })

        this.task = null
      },
    },
  }
</script>

```
ファイルは最後に改行がないとprettierやeslintから怒られるので忘れないように。


出力結果は以下です。
![スクリーンショット 2019-09-04 21.22.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415529/7507a81a-87bd-9b29-f727-7d54dd15a187.png)

それでは、楽しくコーディングしていきましょう！
Happy Hacking 😁!!