사용기 - Vue Material Kit 2

 Vue 2.5 기반의 Vue Material Kit 을 사용한 경험이 있어 Vue 3.0 과 bootstrap 5.0 을 기반으로 하는  Vue Material Kit 2 을 경험해 보았다. 

Vue Material Kit 2

홈페이지를 통하여 다운로드하는 경우 회원가입 절차가 필요하지만 Github 사이트를 방문하여 다운로드 하는 방법도 있다. 

VITE

Vue Material Kit 2 는 이전 버전과 다르게 개발 도구로  VITE(이하 비트)를 사용하고 있다. VITE 는 프랑스어로 '빠르다'라는 뜻이며 빠른 Frontend 개발 도구를 목표로 하고 있다. 

SFC (Single File Component)

Vue Material Kit 는 모든 예제들이 Vue 3 버전에서 처음으로 소개된 SFC (Single File Components) 문법(syntax) 를 사용하고 있다. 아마도 이것이 적응하는데 있어 어려운 부분이 있었던 것 같다.

Vue Material Kit UI 컴포넌트

Vue Material Kit 에서 제공하는 UI 컴포넌트들이 v-model 을 지원하지 않고 있어 "Best Ways to Use v-model to Custom Components in Vue 3 (Absolute Guide)" 자료를 참조 수정하여 사용하였다. 예를 들자면 MaterialInput.vue 컴포넌트을 (https://github.com/creativetimofficial/vue-material-kit/blob/master/src/components/MaterialInput.vue) 아래와 같이 수정하여 v-model 기능을 사용할 수 있도록 하였다.

	<script setup>
	defineProps({
	id: {
	type: String,
	default: "",
	},
	type: {
	type: String,
	default: "text",
	},
	label: {
	type: [String, Object],
	text: String,
	class: String,
	default: () => ({
	class: "",
	}),
	},
	modelValue: {
	type: String,
	default: "",
	},
	placeholder: {
	type: String,
	default: "",
	},
	size: {
	type: String,
	default: "md",
	},
	error: {
	type: Boolean,
	default: false,
	},
	success: {
	type: Boolean,
	default: false,
	},
	isRequired: {
	type: Boolean,
	default: false,
	},
	isDisabled: {
	type: Boolean,
	default: false,
	},
	inputClass: {
	type: String,
	default: "",
	},
	icon: {
	type: String,
	default: "",
	},
	});
	const emit = defineEmits(['update:modelValue'])
	const updateValue = (event) => {
	console.log("event!!!");
	emit('update:modelValue', event.target.value)
	}
	function getClasses(size, success, error) {
	let sizeValue, isValidValue;
	sizeValue = size && `form-control-${size}`;
	if (error) {
	isValidValue = "is-invalid";
	} else if (success) {
	isValidValue = "is-valid";
	} else {
	isValidValue = "";
	}
	return `${sizeValue} ${isValidValue}`;
	}
	</script>
	<template>
	<div class="input-group">
	<label v-if="label" :class="label.class">{{
	typeof label == "string" ? label : label.text
	}}</label>
	<span v-if="icon" class="input-group-text"
	><i class="fas" :class="`fa-${icon}`" aria-hidden="true"></i
	></span>
	<input
	:id="id"
	:type="type"
	class="form-control"
	:class="[getClasses(size, success, error), inputClass]"
	:value="modelValue"
	@input="updateValue"
	:placeholder="placeholder"
	:isRequired="isRequired"
	:disabled="isDisabled"
	/>
	</div>
	</template>

view raw MaterialInput.vue hosted with ❤ by GitHub

Pinia 를 이용한 상태 값 관리

vuex 대신 Pinia 를 사용하여 상태 값을 관리한다. 로그인 상태 값을 관하는 것을 예로 들자면 더욱 간단하게 구현이 가능하다. 개인적으로는 mutations 를 사용하지 않는 점이 편리하게 느껴졌다. 

환경변수 활용

Vite 로 빌드된 Vue 3 앱은 기본적으로 dotenv(.env) 환경 변수를 지원하기 때문에 필요한 값들은 .env 파일에 정의하여 사용하면 된다. 주의할 것은 클라이언트 앱에서 사용하려면 VITE_ 접두사를 붙여야 한다. 서버 API URL 과 같은 값들을 정의하여 사용하면 편리하다.

참고자료

1. https://vuelidate-next.netlify.app/#getting-started-1
2. Best Ways to Use v-model to Custom Components in Vue 3 (Absolut    e Guide)
3. Vue 3 + Vite - Access Environment Variables from dotenv (.env)