Vue/Nuxt

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 코드가 작동하지 않을 것이다. 그렇기 ..

layouts/ · Nuxt Directory StructureNuxt provides a layouts framework to extract common UI patterns into reusable layouts.nuxt.com layouts 디렉토리 생성 후 하위에 파일 생성   app.vue    layouts/container.vue slot 부분이 content가 들어갈 구역

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 */ }})   기본 테마 쉽게 사용..

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를 먼저 설치해서 그런거였다ㅜ