vuetify
IT 및 일상을 공유합니다.
[Nuxt] vuetify custom svg 파일 연결하기
nuxt에서 svg파일을 사용할 때 아래 라이브러리를 활용하여 래핑 해서 사용을 했습니다. 예를 들어서 import CloseIcon from '~/asset/images/icon/icon-close.svg?inline' 이런 식으로 컴포넌트에서 사용했습니다. @nuxtjs/svg: "^0.4.1", 위에 라이브러리를 사용하여 svg파일을 컴포넌트로 사용하는데는 문제가 없었는데 vuetify2에 v-text-field 컴포넌트에서 close 아이콘을 변경하려면 내부적으로 스타일 클래스를 찾아서 css파일로 변경하여 사용해야 하고 이게 생각해 보니 재사용성도 부족하고, 하드코딩으로 되는 거 같아서 svg파일을 vuetify2 icon에 mdi 아이콘을 사용하는 것처럼 등록하여 사용하는 게 더 나을 거 같다..
Nuxt3 Vuetify variables configFile 에러 해결 방법
Nuxt3 Vuetify settings.scss 설정 에러 Nuxt3 v3.9.3 vuetify v3.5.1 Nuxt3에서 vuetify 설치하고 settings.scss로 variables 설정을 아래처럼 진행했는데 //nuxt.config.ts import vuetify from 'vite-plugin-vuetify' import { createResolver } from '@nuxt/kit' const { resolve } = createResolver(import.meta.url) export default defineNuxtConfig({ css: [ 'vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css', ], ..
[Nuxt] Vuetify 설치 방법 및 Material icon 설정
Nuxt2 환경에서 Cli 명령어로 간단하게 Nuxt 프로젝트와 Vuetify 설치를 진행을 해보고 Material icon을 설정하는 방법을 알아보도록 하겠습니다. Nuxt2 설치 cli 명령어로 나오는 밑에 단계들 진행 # nuxt2 프로젝트 생성 cli 명령어 npx create-nuxt-app NuxtTest # 1. 프로젝트 이름 설정 create-nuxt-app v5.0.0 ✨ Generating Nuxt.js project in . ? Project name: (NuxtTest) # 2. 언어 설정 ? Programming language: (Use arrow keys) > JavaScript TypeScript # 3. package manager 설정 ? Package manager: (..