Nuxt에 vee-validation을 적용해보자.

 

 

✏️Nuxt에 vee-validation을 적용해보자.

 

Nuxt 프로젝트에 로그인 기능을 추가할 일이 생겼고, 로그인하면 또 검증 로직을 실행해줘야 하기 때문에 

vee-validation을 이용하여 검증을 하려고 한다! 

 

현재 프로젝트에서는 vee-validation 2버전대로 사용 중이라서, 현재 3버전대와는 조금 차이가 있어서 

새로 조사를 하게 됐다. 가이드 글이 잘 되어 있긴 하지만 영어라서.. 한글로 정리된 글은 별로 없어서 아쉬웠다. 

Next말고 Nuxt라서 인기가 없나...

 

우선 vee-validation을 설치해보자. 

 

npm install vee-validate --save

 

설치 후 플러그인으로 사용하기 위해 plugins 폴더에 validation.js 파일을 생성하자.

 

// plugins/validation.js

import Vue from 'vue';
import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';

Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);

Object.keys(rules).forEach((rule) => {
  extend(rule, rules[rule]);
});

 

import 구문을 통해 Vue, ValidationProvider, ValidationObserver, extend 등을 가져오고, 

vee-validate/dist/rules에서 rules를 통으로 가져온다! 

 

여기서 주의할 점이 있다. 

 

아래 내용은 vee-validate 문서에 기재되어 있는 내용이다.

By default Nuxt ignores transpilation of the node_modules folder,
and since the rules.js is an ES6 export. 
You should add vee-validate/dist/rules to the list of sources that will be transpiled.
Otherwise you might run into "Unexpected Token: export" errors.

 

기본적으로 Nuxt.js는 node_modules 폴더의 트랜스파일을 무시하기 때문에 트랜스 파일 목록에 추가해줘야 한다. 

 

nuxt.config.js 파일에 아래처럼 코드를 추가해야 한다.

// nuxt.config.js

  build: {
    transpile: ['vee-validate/dist/rules'],
  },

 

추가해줬다면 다시 validation.js 코드를 보자. 

 

Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);

Object.keys(rules).forEach((rule) => {
  extend(rule, rules[rule]);
});

 

ValidationProvider, ValidationObserver를 컴포넌트에서 사용할 수 있도록 추가해주자.

 

어떤 기능을 하는건지 짚고 넘어가자면, 

 

ValidationProvider: 검증할 요소 (input 등)을 감싸 검증을 도와준다.

ValidationObserver: 양식 전체의 요소를 검증할 수 있도록 도와준다. (하위 요소로 ValidationProvider를 여러개 둘 수 있음)

 

Object(keys) 구문은 가져온 모든 rules를 foreach로 하나씩 extend하여 규칙을 사용할 수 있게 해준다. 

 

 

그리고 사용해보면..! 

 

<ValidationProvider v-slot="{ errors }" rules="required">
	<input v-model="test" type="text" />
	<span>{{ errors[0] }}</span>
</ValidationProvider>

 

정상적으로 작동이 된다. :)