vuetifyちょっとわかった

vuetifyの仕組みがちょっとだけわかった気がした。

Nuxt.js では、最初にvuetifyでプロジェクトを作成すると、layoutsディレクトリにdefault.vueが自動で作成される。これがルートのvueファイルになる。

Nuxt.js では、<nuxt />を使うと、vueの<router-link />ができるようになる。

先述した、default.vueには、あらかじめ、

<v-app>
  <v-navigation-drawer app>
    <!-- -->
  </v-navigation-drawer>

  <v-app-bar app>
    <!-- -->
  </v-app-bar>

  <!-- Sizes your content based upon application components -->
  <v-content>

    <!-- Provides the application the proper gutter -->
    <v-container fluid>

      <!-- If using vue-router -->
      <router-view></router-view>
    </v-container>
  </v-content>

  <v-footer app>
    <!-- -->
  </v-footer>

この階層が含まれていて、<nuxt />から、pagesディレクトリ内のvueファイルが参照されるみたいな感じになる。

んで、Todo List のUIをちょっと変えた結果、こんな感じになった。

スタイルやらなんやらの設定は、Vueの公式ドキュメントのApplicationのところ以外は、UIKitのドキュメントと似ているので、同じように調べていけばいいようなことがわかった。

なので、カードレイアウトを綺麗に並べたいっていうことをしたければ、このようなコードを書いていけば良い。

<template>
  <div
    id="todo"
  >
    <div
      class="d-flex flex-column"
    >
      <h1>
        Todo List
      </h1>
      <v-card
        v-for="item in items"
        :key="item.num"
        class="mt-2 mb-2"
      >
        <v-card-text>
          <div>{{ item.day }}</div>
          <p class="display-1 text--primary">
            {{ item.summery }}
          </p>
          <div class="text--primary">
            {{ item.detail }}
          </div>
        </v-card-text>
      </v-card>
    </div>
  </div>
</template>