느린 개발자

No match found for location with path "/_nuxt/%EF%BF%BDplugin-vuetify:components/VMain/VMain.sass
vuetify 설정시 위에 에러로 고생하신다면 아래 해결방법을 통해서 다른방법으로 vuetify 설치와 설정을 하시면됩니다. 

느린 개발자

Vuetify3 설치

이번 포스팅에서는 지난 시간 Eslint와 Prettier설정에 이어 Vue와 Nuxt에서 가장 많이 사용되고 유명한 UI 프레임워크인 Vueitfy에 대해서 설치 및 설정 방법에 대해서 적어볼까 합니다.

23.07월 기준

"nuxt": "^3.6.5",

"vuetify": "^3.3.8"

"vite-plugin-vuetify": "^1.0.2"

"sass": "^1.63.6",
"sass-loader": "^13.3.2",

"@mdi/font": "^7.2.96",

 

package.json 전체 버전 내용입니다. 참고하세요.

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.6.5",
    "vuetify": "^3.3.8"
  },
  "devDependencies": {
    "@mdi/font": "^7.2.96",
    "@nuxt/devtools": "latest",
    "@nuxt/types": "^2.17.1",
    "@nuxtjs/eslint-config-typescript": "^12.0.0",
    "@types/node": "^18.16.19",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "css-loader": "^6.8.1",
    "eslint": "^8.44.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "8.8.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-vue": "^9.15.1",
    "prettier": "^2.8.8",
    "sass": "^1.63.6",
    "sass-loader": "^13.3.2",
    "typescript": "^5.1.6",
    "vite-plugin-vuetify": "^1.0.2"
  },
}

 

 

• 터미널에서 vuetify 설치 명령어 입력

npm install vuetify

 

• Vuetify3 종속 항목인 sass도 설치해 줍니다.

npm install sass sass-loader

 

• Material Design Icon을 사용하기 위해 설치합니다.

npm install @mdi/font

 

 

---

 

Vuetify Plugin 구성

plugins 폴더에 "vuetify.ts" 파일을 생성합니다.

// plugins/vuetify.ts

import { createVuetify, ThemeDefinition } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

// TODO: Light 테마 색상 설정 (취향대로)
const LightTheme: ThemeDefinition = {
  dark: false,
  variables: {},
  colors: {
    primary: '#4376fb',
    accent: '#757575',
    secondary: '#FF8F00',
    info: '#26A69A',
    warning: '#FFC107',
    error: '#bb252a',
    success: '#4CAF50'
  }
}

// TODO: Nuxt3 vuetify plugin 설정
export default defineNuxtPlugin((NuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    theme: {  // 테마 설정
      themes: {
        light: LightTheme,
        variables: {}
      }
    },
    icons: { // 아이콘 설정
      defaultSet: 'mdi',
      aliases,
      sets: {
        mdi
      }
    }
  })

  NuxtApp.vueApp.use(vuetify)
})

 

대부분 문서화가 잘되어있으니 아래 공식 vuetify 문서에서도 확인해 보시길 바랍니다.

Vuetify — A Vue Component Framework

 

---

nuxt.config.ts 설정

• vuetify와 mdi에 대한 css 설정을 작성합니다.

// nuxt.config.ts
export default defineNuxtConfig({
  // ...
  css: ['vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css'],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
  // ...
})

 

 

---

Vuetify Scss 파일 설정하기

vuetify를 지원하는 sass 변수를 확장하거나 수정할 수 있게 설정해 주는  vite-plugin-vuetify 설치합니다.

npm install vite-plugin-vuetify

 

• assets 폴더를 생성하고 그 안에 scss 폴더에 settings.scss 파일을 생성합니다. (assets/scss/settings.scss)

@forward 'vuetify/settings' with (
  $button-color: red,
  $button-font-weight: 900,
  $button-border: 10px,
  $button-font-size: 10px
);

 

• scss파일까지 만들었다면 nuxt.config.ts에 아래처럼 설정합니다. 
• modules에 vuetify에 scss파일을 설정합니다.

// nuxt.config.ts
import vuetify from 'vite-plugin-vuetify'

export default defineNuxtConfig({
 // 생략
  css: [
    '@mdi/font/css/materialdesignicons.min.css',
    'vuetify/lib/styles/main.sass'
  ],
  components: [
    {
      path: '~/components',
      pathPrefix: false
    }
  ],
  modules: [
    async (options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) =>
        // @ts-ignore
        config.plugins.push(
          vuetify({
            autoImport: true,
            styles: {
              configFile: 'assets/scss/settings.scss'
            }
          })
        )
      )
    }
  ],
  vite: {
    define: {
      'process.env.DEBUG': false
    },
  },
  build: { transpile: ['vuetify'] },
  sourcemap: {
    server: false,
    client: false
  }
})

 

 

여기까지 하시고 npm run dev 하시면.
Sourcemap for "plugin-vuetify:components/VTabs/VTabs.sass" points to missing source files
뭐 이런 Sourcemap 경고문이 나옵니다. 저도 정확한 이유는 좀 더 찾아봐야 할 거 같습니다. 해결방안은 아래를 참고해 주세요.

 

//nuxt.config.ts

export default defineNuxtConfig({
  // ... 생략
  
  // TODO: 추가
  sourcemap: {
    server: false,
    client: false
  }
})

 

---

 

Vuetify 사용하기

아래처럼 버튼을 하나 만들어보면 위에 settings.scss에 설정했던 값이 v-btn에도 적용되는 것을 확인할 수 있습니다.

<template>
  <div>여기가 index 페이지입니다.</div>
  <v-btn>안녕</v-btn>
  <v-icon>mdi-close</v-icon>
</template>
<script setup lang="ts"></script>
<style scoped></style>

 

vuetify

 

여기까지 Nuxt3와 Vuetify3에 대해서 설치 및 설정하는 방법에 대해서 설명해 봤습니다. 저도 회사일과 학습을 병행하면서 진행하기 때문에 부족한 부분과 누락된 부분이 있을 수 있습니다. 그래도 최대한 시행착오를 겪으면서  찾아본 방법이니 참고하면서 확인하시면 될 거 같습니다. 그리고 해당 라이브러리나 프레임워크들이 계속 버전이 업데이트되고 있으니까 현재 나오는 에러나 버그들이 해결될 거라고 생각합니다.