[vue3/nuxt3/vuetify3] nuxt3 + vuetify3 사용방법

0. 들어가기

-. 스타일 엔진이 필요하니, 이제 vuetify3를 공부해야지...

-. 아직 vuetify는 정식 release가 되지 않았다. 23년 1분기에 제대로 개발 된 버전 릴리즈가 목표라고 함. 그렇다고, 지금 당정 못쓰는건 아니니 꾸역꾸역 따라해 보자. 

-. vue3 + vuetify3는 아주 간단하게 설치할 수 있는데, 아직 vue3 자체가 미완성이라 그런가 nuxt3 + vuetify3 사용 시 약간 복잡하게 진행해야 한다. 다행히 관련된 블로그 글을 발견해서 성공함. 

 

1. vue cli를 이용한 설치방식 시도 (nuxt 사용 안할 시)

-. nuxt를 사용하지 않을 경우, vue-cli로도 plugin 추가가 가능하다.

vue add vuetify

-. 하지만 nuxt 프레임웍 사용 시엔 실패함.

2. vuetify 개별 설치

-. nuxt3와 vuetify3사용을 위해선 npm/yarn으로 직접 패키지 추가를 해줘야 한다.

1) 패키지 추가

-. 반드시 vuetify@next 설치를 해야한다. 안그럼 vue2 용 vuetify가 설치된다.

npm install vuetify@next

-. 의존성 항목에 vuetify3가 성공적으로 추가되었다.

package.json
--
  "dependencies": {
    "vuetify": "^3.0.3"
  }

2) nuxt 추가설정

-. nuxt3의 plugins 디렉토리에 뷰티파이 추가설정, 그리고 nuxt config파일에 뷰티파이 설정을 추가하자.

~/plugins/vuetify.js
--
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

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

  NuxtApp.vueApp.use(vuetify);
});

----
~nuxt.config.ts
--
export default defineNuxtConfig({
    css:['vuetify/lib/styles/main.sass'],
    build: {
        transpile: ['vuetify'],
    },
    vite: {
        define: {
            'process.env.DEBUG': false,
        }
    }

})

3) 실행

-. 마지막으로, vuetify 예제 코드를 입력하면 정상적으로 작동하는 것을 확인할 수 있다.

~app.vue
--
<template>
  <v-app>
    <v-card> <v-card-title> vuetify </v-card-title></v-card>
  </v-app>
</template>