[Vue.js] Vuetify 설치 및 환경 세팅

 

Vuetify

 

Vue에서 제공하는 UI, CSS 라이브러리입니다.

 

Vuetify 설치

 

npm으로 vuetify 프로젝트가 설치가 되었다면, 다음과 같은 명령어로 vuetify를 설치해주시면 됩니다.

 

vue add vuetify

 

위 명령어 입력 후 설치하다 선택하는 단계가 나올 텐데요. 그때 default를 선택해주시면 됩니다.

 

성공적으로 설치가 됐음

 

Vuetify import

 

// src/main.js

import vuetify from './plugins/vuetify'

const app = createApp(App)

app.mount('#app').use(vuetify)

 

여느 라이브러리가 그렇듯 설치 후에 import 후 해당 홈페이지 접속해서 사용하시면 됩니다.

 

Vuetify 홈페이지

 

https://vuetifyjs.com/en/

Vuetify — A Material Design Framework for Vue.js

 

마지막으로 저를 포함해서, 처음에 vue 3 버전으로 설치하신 분들은 의존성 문제 등으로 default(vuetify 2)를 선택하시면 에러가 뜰 겁니다.

 

다시 말해 vue 3 버전은 현재 vuetify를 사용할 수 없고, 사용하시려면 선택 단계에서 default가 아닌 vuetify 3을 선택하셔야 하는데, 아직까지는 테스트 버전이라 vuetify를 사용하실 분들이면 그냥 vue 2 버전으로 프로젝트를 다시 생성해서 설치하시면 됩니다.