[Nuxt 3] Vuetify 3 SSR 오류 해결하기

“[Vuetify] Could not find defaults instance”

• 오류 원인: SSR 환경에서 Vuetify 기본 설정이 초기화되지 않음
• 해결책: 별도의 Vuetify 플러그인을 만들어 Nuxt 애플리케이션에 등록
• 등록 방법: plugins/vuetify.ts 파일을 만들고, nuxt.config.ts에 플러그인을 추가

 

해결 방법

1. Vuetify 플러그인 파일 만들기

먼저, Nuxt 3에서 Vuetify를 서버와 클라이언트 모두에서 사용할 수 있도록 플러그인을 만듭니다.

// plugins/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,
    // defaults 옵션을 추가할 수도 있습니다.
  })

  nuxtApp.vueApp.use(vuetify)
})

2. 플러그인 등록하기

생성한 플러그인을 Nuxt 설정 파일에 등록합니다.

// nuxt.config.ts
export default defineNuxtConfig({
  // ... (다른 설정)
  plugins: ['~/plugins/vuetify.ts'],
  // Vite 설정, CSS 등 다른 내용은 필요에 따라 추가
})