Nuxt

Icon · Nuxt ModulesIcon module for Nuxt with 200,000+ ready to use icons from Iconify.nuxt.com 기본 세팅설치npm i -D @nuxt/icon nuxt.config.tsexport default defineNuxtConfig({ modules: [ '@nuxt/icon' ]})   사용 방법1. Iconify provider 사용export default defineNuxtConfig({ icon: { size: '14px', class: 'icon', mode: 'svg', provider: 'iconify' },});provider를 iconify로 하면 별도의 데이터셋을 프로젝트에 저장할 필..

[ Nuxt, Tailwind ] custom color 적용primary로 정의하고 싶어  tailwind.config.mjs 파일에 추가할 컬러를 작성해줬다. export default { theme: { extend: { colors: { primary: { 50: "#EFF7FF", ... }, }, }, },}; 분명 공식 문서에서는 tailwind config 파일에 이렇zodev.tistory.com이전 글의 방법이 되지 않을 경우에는,,, 공식 문서의 방법으로 회귀하는 방법이 있습니다.   참고로 다른 프로젝트이기 때문에 환경에 따라 사용에 차이가 생긴 것 같다.근데 사실 원인은 잘 모르겠다... // ❌ 이렇게 쓰지 마세여export default { // ... content: [ ..

primary로 정의하고 싶어  tailwind.config.mjs 파일에 추가할 컬러를 작성해줬다. export default { theme: { extend: { colors: { primary: { 50: "#EFF7FF", ... }, }, }, },}; 분명 공식 문서에서는 tailwind config 파일에 이렇게 정의하면 된다고 했는데,…   export default { theme: { extend: { colors: { myColor: { 50: "#EFF7FF", ... }, }, }, },};뭐 이런 식으로 색상 명을 ..

이번에는 글꼴 파일을 다운로드받아 프로젝트 폴더에 저장하여 쓰는 방법이 아니라 web font를 적용하는 방식을 택해봤다. 참고로 web font url은 pretendard 글꼴 홈페이지에 친절하게 나와있다. Web Font 적용1. font.css@font-face { font-family: "Pretendard-Regular"; src: url("") format("woff"); font-weight: 400; font-style: normal; } 2. nuxt.config.tsnuxt.config 파일에 @font-face를 작성한 css 파일을 등록해준다.export default defineNuxtConfig({ // ... css: ["~/assets/css/index.css", "~/as..

기본 적용설치npm install pinia @pinia/nuxt  configexport default defineNuxtConfig({ modules: [ "@pinia/nuxt", ],})  storestores 디텍토리 생성 후 하위 store 파일 생성(nuxt는 stores 폴더 내에 정의된 모든 store을 auto imports 한다.)export default defineStore("userStore", () => { const user = ref({ name: "Yong", id: 1, number: "123", }); return { user };});  사용 변경 ➡ {{ user.name }}  그러나 이 경우 새로고침 시..

primevue는 vue에서 많이 쓰이는 UI 라이브러리이고, 문서가 깔끔하게 잘 되어있다는 장점이 있다. 특히나 pass through를 이용해 css 커스텀을 쉽게 할 수 있는 것도 굉장히 편리하다. primevue 설치npm install primevuenpm install --save-dev @primevue/nuxt-module// stylednpm install @primevue/themes nuxt.config.ts 파일에 모듈 등록export default defineNuxtConfig({ modules: [ '@primevue/nuxt-module' ], primevue: { /* Configuration */ }})   기본 테마 쉽게 사용..

nuxt/ui 설치 npm install @nuxt/ui @nuxtjs/color-mode @nuxt/icon  💥 설치 시 Error가 발생했다!![vite-node] [ERR_LOAD_URL] #tailwind-config/theme/colors 참고 링크→ Tailwind CSS and Nuxt UI의 충돌로 발생한 에러라는 뜻  만약 이 에러가 발생했다면 defineNuxtConfig 내부의 모듈 정의 순서를 바꿔주면 된다.// @nuxt/ui가 앞에 위치해야 한다.modules: ["@nuxt/ui", "@nuxtjs/tailwindcss"],그리고 애초에 nuxt/ui를 쓸거면 따로 깔 이유가 하등 없다…나는 tailwind를 먼저 설치해서 그런거였다ㅜ

ESLint코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구JS코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구 (에러 표시)다양한 방식으로 구현할 수 있는 코드 방식을 일관성있게 구현할 수 있도록 잡아준다.처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있다. ESLint Module - Nuxt ESLintAll-in-one ESLint integration for Nuxt. It generates a project-aware ESLint flat config and provides the ability to optionally run ESLint check along side the dev..