[Vue.js 3 + Vuetify 3] Vuetify 3 설치 및 적용하는 방법

안녕하세요, 오늘은 Vuetify 3을 설치하고 적용하는 방법에 대해서 알아보겠습니다.

 

먼저, Vue.js 3에 대한 프로젝트를 생성한 상태라고 가정하겠습니다.

이어서, 아래 명령어를 통해 vuetify를 설치합니다.

 

npm install vuetify@next

 

npm i -D vuetify vite-plugin-vuetify
npm i @mdi/font

 

위의 명령어 실행 후 다음과 같은 경로에 파일을 추가해줍니다. (vuetify.js)

• src/plugins/vuetify.js

// src/plugins/vuetify.js
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default createVuetify({
  components,
  directives,
})

 

이어서, main.js 파일을 다음과 같이 수정합니다.

 

• src/main.js

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

const app = createApp(App)

app.use(vuetify)

app.mount('#app')

 

---

 

위와 같이 수정하면, 모든 준비는 완료하였습니다. App.vue 파일에 간단한 Vuetify 3 버튼을 추가해보겠습니다.

 

• src/App.vue

<template>
  <v-app>
    <v-btn color="primary">Click Me</v-btn>
  </v-app>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

위의 실행 결과는 다음과 같습니다.

 

실행 결과

 

---

 

이상으로, Vuetify 3을 설치하고 적용하는 방법에 대해서 알아보았습니다.

감사드립니다.