Vuetifyの用途別の使い方まとめ

開発環境は、Windows 10 Pro(64bit) + vue 2.6.12 + vuetify 2.4.11。

■始めに

Vuetifyでは、ルートとなるコンポーネントには、template部分に、v-appタグで囲っておかないといけない。
■参考リンク
Application

■指定の要素を中央に寄せたい

※中央に寄せたい要素(block属性の場合)のclass属性に、mx-autoを指定します。

<template>
  <v-main>
    <v-card elevation="3" class="mx-auto" max-width="360">
      <v-container class="spacing-playground pa-10">
        <v-text-field label="メールアドレス"></v-text-field>
	<v-text-field label="パスワード"></v-text-field>
	<v-btn color="primary">ログイン</v-btn>
      </v-container>
    </v-card>
  </v-main>
</template>

■v-btnの位置を右に寄せたい

※v-btnはdisplayがinline-flexなので、親要素にdivタグを追加し、そのclass属性に、d-flex justify-end ~を追加した。

<template>
  <v-main>
    <v-card elevation="3" class="mx-auto" max-width="360">
      <v-container class="spacing-playground pa-10">
        <v-text-field label="メールアドレス"></v-text-field>
	<v-text-field label="パスワード"></v-text-field>
        <div class="d-flex justify-end mb-6">
	  <v-btn color="primary">ログイン</v-btn>
        </div>
     </v-container>
   </v-card>
  </v-main>
</template>

■参考リンク
flex