🌸

SpringBoot で Vue3 を組み込む事始め② - Vuetify3を導入してログイン画面を作成する

2023/06/30に公開

TypeScript

Vuetify 3

tech

前書き

既存のプロジェクトは管理画面で、Material DashboardなどのBootstrapベースのAdminテンプレートを使っています。
　今回もそれでいこうかと思ってたんですが、そこまで大した機能は使わないのと、Vuetifyのコンポーネントが豊富そうなので、勉強も兼ねてVuetifyで頑張ることにしました。あとTypescriptベースのテンプレートって数少ないのね。。

前回まで

この記事でのソースコード

最終形態ソースコード

作業開始

Vuetifyの導入

$ cd frontend/
$ npm install vuetify

今回はこのバージョンで入りました。

package.json

  "dependencies": {
    "pinia": "^2.1.3",
    "vue": "^3.3.4",
    "vue-router": "^4.2.2",
    "vuetify": "^3.3.6"
  },

Manual steps を参考に、Vuetifyがプロジェクトに適用されるようにmain.tsを修正します。

ログイン画面の作成

公式にあったので、そのままviews/LoginView.vue として作ります。
Vuetifyすごいなー

views/LoginView.vue

LoginView.vue

<script setup lang="ts">
import { ref } from 'vue';

const visible = ref(false);
</script>

<template>
	<div>
		<v-img class="mx-auto my-6" max-width="228"
			src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg"></v-img>

		<v-card class="mx-auto pa-12 pb-8" elevation="8" max-width="448" rounded="lg">
			<div class="text-subtitle-1 text-medium-emphasis">Account</div>

			<v-text-field density="compact" placeholder="Email address" prepend-inner-icon="mdi-email-outline"
				variant="outlined"></v-text-field>

			<div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">
				Password

				<a class="text-caption text-decoration-none text-blue" href="#" rel="noopener noreferrer" target="_blank">
					Forgot login password?</a>
			</div>

			<v-text-field :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'" :type="visible ? 'text' : 'password'"
				density="compact" placeholder="Enter your password" prepend-inner-icon="mdi-lock-outline" variant="outlined"
				@click:append-inner="visible = !visible"></v-text-field>

			<v-card class="mb-12" color="surface-variant" variant="tonal">
				<v-card-text class="text-medium-emphasis text-caption">
					Warning: After 3 consecutive failed login attempts, you account will be temporarily locked for three
					hours. If you must login now, you can also click "Forgot login password?" below to reset the login
					password.
				</v-card-text>
			</v-card>

			<v-btn block class="mb-8" color="blue" size="large" variant="tonal">
				Log In
			</v-btn>

			<v-card-text class="text-center">
				<a class="text-blue text-decoration-none" href="#" rel="noopener noreferrer" target="_blank">
					Sign up now <v-icon icon="mdi-chevron-right"></v-icon>
				</a>
			</v-card-text>
		</v-card>
	</div>
</template>

App.vue

App.vue

<script setup lang="ts">
import { RouterView } from "vue-router";
</script>

<template>
  <v-app>
    <RouterView />
  </v-app>
</template>

router/index.ts

index.ts

import LoginView from "@/views/LoginView.vue";
import type { RouteRecordRaw } from 'vue-router';
import { createRouter, createWebHistory } from 'vue-router';

const routSettings: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'login',
    component: LoginView
  },
];


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routSettings
})

export default router

npm run dev すると出ました！

あとはtemplateをカスタマイズすればよさそうです。
しかし、他のtextコンポーネントだと、ブラウザの自動補完が出なかったりするのはなんでだろ🧐
あと、input内のiconが表示されないのもまだ謎。

次はレイアウトを組むよー

参考

Vuetify
Vuetify3を使いこなすためのTheme, Styles, Sassの設定の基礎

前書き