본문 바로가기

Front-end/Vuetify

 (3)
Vuetify에서 Nuxt.js 링크 사용하기 / 뒤로가기 잡담 href 등 하이퍼링크를 이용하면 리디렉션은 가능하지만 nuxt-link를 사용할때와는 다르게 아예 새로운 페이지를 불러온다. 다행히 Vuetify에는 nuxt-link로 동작하도록 하는 prop이 있는데, 공식 문서에서는 boolean 값으로만 나오고 자세한 설명이 없어 조금 해멨다. 해결법 v-btn을 기준으로 원본 코드가 아래와 같다면 테스트 페이지 아래와 같이 바꿔주면 된다. 테스트 페이지 즉, prop으로 to=""와 nuxt를 추가해주면 정상 동작한다. v-btn뿐만이 아니라 v-tab등의 컴포넌트에도 그대로 적용이 가능하다. 여기서 주의할 점이 있다면, :to의 경우 동적인 값을 받을 수 있고, to의 경우 단순 문자열로 취급된다. 이 버튼은 /test로 갑니다 이 버튼은 /routeS..
Vuetify V-Carousel 커스터마이징 : 호버, 버튼 위치, 숫자 표시 잡담 진행중인 프로젝트에서 디자이너가 요구하는 Carousel의 형태가 다음과 같았다. 1. 넘김 버튼은 좌/우로부터 각각 250px씩 떨어져있을 것. 2. 평소에는 넘김 버튼이 표시되지 않으며, 마우스 호버 시에만 표시될 것. 3. 모바일 환경에서는 넘김 버튼이 표시되지 않으며, 슬라이드 터치로 전환될 것. 4. 모바일 환경에서는 하단에 "현재 아이템/전체 아이템" 을 숫자로 표시할 것. 처음에는 V-Carousel의 경우 커스터마이징 옵션에 제약이 많고, js파일을 직접 수정할 수 없으며, Vue내에서 Component로도 접근할 수 없어 다른 플러그인으로 대체하려 했으나, 시도 끝에 해당 조건을 모두 맞출 수 있었다. 해결법 1. 넘김 버튼은 좌/우로부터 각각 250px씩 떨어져 있을 것. V-Ca..
Vuetify 테마 적용하기 (Nuxt.js) 설명 nuxt.config.js 파일에서 변경한다. Nuxt Starter로 vuetify를 체크할 경우, 초기값이 아래와 같이 설정되어 있다. vuetify: { customVariables: ['~/assets/variables.scss'], theme: { dark: true, themes: { dark: { primary: colors.blue.darken2, accent: colors.grey.darken3, secondary: colors.amber.darken3, info: colors.teal.lighten1, warning: colors.amber.base, error: colors.deepOrange.accent4, success: colors.green.accent3 } } } }, ..

티스토리툴바