Nuxt Layout 공식 문서 참고 layouts/ · Nuxt Directory StructureNuxt provides a layouts framework to extract common UI patterns into reusable layouts.nuxt.com 레이아웃을 쓰지 않을 페이지에는 definePageMeta를 사용해서 layout을 false 처리 해주면 해당 페이지에는 레이아웃이 제외된다.definePageMeta({ layout: false,}); 근데 만약 이게 적용이 안 된다면 NuxtLayout에 적용되어 있는 레이아웃 파일 이름을 확인해보자. 만약 이처럼 layout에 특정 이름을 적용해줬다면 위의 defindePageMeta 코드가 작동하지 않을 것이다. 그렇기 ..
nuxt
Dayjs · Nuxt ModulesDay.js module for Nuxtnuxt.com 설치npm i nuxt-dayjs nuxt.config.tsexport default defineNuxtConfig({ modules: [ 'dayjs-nuxt' ]}) composablesuseDayjs composable로 dayjs를 사용할 수 있다.const dayjs = useDayjs()dayjs.locale('fr') configurationdayjs 기본 설정export default defineNuxtConfig({ modules: ['dayjs-nuxt'], dayjs: { locales: ['ko', 'en'], plugins: ['timezone'], ..
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 */ }}) 기본 테마 쉽게 사용..
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..
