[Nuxt3] 넉스트에 Vuetify 적용

1. 개요

 

이번 포스팅에서는 Nuxt3에 Vuetify 3을 적용시켜보는 방법을 알아보도록 하겠습니다.

 

2. 설치

 

만들어진 프로젝트에서, 아래 명령어를 실행시켜주도록 합니다.

 

yarn add vuetify@next sass

 

이후, plugin 폴더에 vuetify.ts 를 생성해서 플러그인을 정의해주도록 합니다.

 

[vuetify.ts]

 

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { defineNuxtPlugin } from '#app';

export default defineNuxtPlugin(nuxtApp => {
   const vuetify = createVuetify({
      components,
      directives,
   })

   nuxtApp.vueApp.use(vuetify)
})

 

 

nuxt.config.ts 에 설정을 해주도록 합니다.

 

[nuxt.config.ts]

 

css: [
   'vuetify/lib/styles/main.sass'
],
build: {
   transpile: ['vuetify']
},
vite: {
   define: {
      'process.env.DEBUG': false,
   }
},

 

이상으로 vuetify 설정이 완료되었습니다.