Nuxt 3와 함께 Vuetify를 사용하는 방법

Utilize the latest versions of Vuetify and Nuxt together.

설치

아직 없는 경우 Nuxt 3 프로젝트를 생성하여 시작합니다.

npx nuxi init nuxt-app

그런 다음 cd nuxt-app를 실행하고 yarn를 실행하여 종속성이 설치되었는지 확인합니다.

이제 Nuxt 3 프로젝트가 설정되었으므로 Vuetify를 통합할 준비가 되었습니다. nuxt 애플리케이션의 루트 디렉토리에 있는 동안 다음 명령을 실행하여 Vuetify 3 및 종속 항목인 sass를 설치합니다.

yarn add vuetify@next sass

package.json는 이제 다음과 같이 표시됩니다.

// package.json
"devDependencies": {
  "nuxt": "3.0.0-rc.1"
},
"dependencies": {
  "sass": "^1.51.0",
  "vuetify": "^3.0.0-beta.1"
}

Vuetify 플러그인 만들기

Vuetify가 설치되어 있으므로 이제 Nuxt와 대화하려면 Vuetify가 필요합니다. Nuxt의 기능plugin을 사용하여 이를 수행합니다.
plugins 폴더를 만든 다음 vuetify.js라는 파일을 만들어 새로 만든 플러그인 폴더에 넣습니다.

그런 다음 vuetify.js 파일 내에서 다음 코드를 붙여넣습니다.

// 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)
})

이것은 Vuetify의 설명에 대부분 문서화되어 있습니다here. 주요 차이점은 nuxtApp.vueApp.use(vuetify) 대신 app.use(vuetify) 를 사용한다는 것입니다.

새로운 플러그인을 사용하도록 Nuxt 3 구성

구성의 마지막 비트는 nuxt.config.ts 파일에서 발생합니다. 여기에서 Nuxt에게 Vuetify의 sass를 올바르게 찾고 빌드하는 방법을 알려줍니다.

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

Nuxt 3와 함께 Vuetify 즐기기

이제 모든 것이 예상대로 작동하고 Nuxt 페이지 내에서 다양한 Vuetify 구성 요소를 활용할 수 있습니다!

즐기다!