Nuxt를 Vuetify와 연결하기.

Vuetify

 

 

 

이제 막 페이지와 레이아웃까지 잡았는데, 이제는 디자인, 화면, 프론트단을 만들어 보려고 한다.

react에서는 ant-design이 대세였는데, Vue에서는 Vuetify를 사용할 예정.

 

Vuetify는 한마디로 자주쓰는 컴포넌트들을 미리 구성해놓은 프레임워크다.

 

설치명령어는

npm -> npm i vuetify @nuxtjs/vuetify

yarn -> yarn add @nuxtjs/vuetify

 

 

 

@nuxtjs/vuetify를 설치하는 이유?

 

Nuxt는 외부 라이브러리에 연결하는 방법이 독특하다.

Nuxt는 싱글페이지가 아니고, 페이지가 여러개며

기존 Vue식으로는 이럴때 다른 페이지에도 따로따로 외부 라이브러리를

연결해줘야만 했다.

 

Vue library import

 

 

 

그러나 Nuxt에서는 그저 nuxt.config.js의

module에 '@nuxtjs/vuetify' 한 단어를 추가해넣음으로써

노드 모듈의 plugin.js에서 모든 페이지에 자동 import를 해주며,

우리는 손쉽게 해당 기능을 사용할 수 있게 되었다.