[Vue.js] Vuetify 사용하기

Vuetify란, Vue에서 제공하는 css 라이브러리다.

1. Vuetify 설치

npm install vuetify

node_modules 밑에 vuetify 생성확인

2. Vuetify 사용 설정

• main.js 에 아래 설정을 추가한다.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// vuetify
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);

Vue.config.productionTip = false

new Vue({
    router,
    store,
    vuetify: new Vuetify(),
    render: h => h(App)
}).$mount('#app')

• App.vue template 수정

<!-- App.vue -->
<template>
  <v-app id="app">

  </v-app>
</template>

3. 적용 확인

Vuetify 버튼 적용 확인하기

<!-- App.vue -->
<template>
  <v-app id="app">
    <v-btn color="success">Success</v-btn>
    <v-btn color="error">Error</v-btn>
    <v-btn color="warning">Warning</v-btn>
    <v-btn color="info">Info</v-btn>
  </v-app>
</template>