Vue

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

Vue 스타일 가이드  Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org  프로젝트 버전업을 하면서 Vue의 스타일 가이드를 참고하여 코딩 컨벤션을 정했다.가장 중점적으로 생각한 것은 코딩 문법과 파일 이름 설정이다. (변수명은 엔진과도 맞춰야 했기 때문에 비교적 유동적으로 고려했다.)  1. prettier 설정 통해 코드 컨벤션 강화 { "semi": true, // 문장 끝에 세미콜론 사용 "tabWidth": 2, // 탭 너비는 2칸 "bracketSpacing": true, // 중괄호 안에 양쪽 공백 생성 "trailingComma": "all..

interface Props { myObj?: { name: string, icon: string };} const props = withDefaults(defineProps(), { myObj: { name: '', icon: '' },}); optional props를 작성하면 초기값을 설정해주는 것이 권장된다.그러나 이때 객체 타입의 props의 초기값을 저렇게 단순하게 설정하게 되면 eslint 에러가 나게 된다. Type of the default value for 'myObj' prop must be a function. 기본값 객체는 공유된다.즉, { name: ‘’, icon: ‘’ } 를 여러 컴포넌트 인스턴스에서 동일하게 참조하기 때문에, 한 곳에서 해당 객체가 바뀌면 모든 곳에서 변..

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 }}  그러나 이 경우 새로고침 시..