# vuetify

30개의 포스트
post-thumbnail

Nuxt 레이아웃 동적 구성 하기

아래 명령어로 새 프로젝트를 생성 한다.Vuetify를 선택 해주는 것 외에는 본인 환경에 맞게 적당히 선택 해준다.yarn dev로 서버를 실행 한다.브라우저로 http://localhost:3000을 열어보면 아래와 같이 기본 페이지가 생성 되어 있다.pa

2021년 10월 25일
·
0개의 댓글
post-thumbnail

VUE+VUETIFY+TYPESCRIPT 세팅 (VSCODE)

호스팅할 포트폴리오 페이지 개발을 위한 vue+vuetify+typescript+vscode 조합의 세팅과정을 정리한다. vscode terminal에서 (vue cli 설치 후) vue create test => Manually select features 선택

2021년 10월 18일
·
0개의 댓글

[Vue.js] Vuetify 사용하기

Vuetify란, Vue에서 제공하는 css 라이브러리다. 개발환경 내 설치 및 사용방법에 대해 알아보도록 하자.

2021년 9월 30일
·
0개의 댓글
post-thumbnail

Vuetify 홈페이지 한글 번역하기

Vue를 기반으로 구축 된 UI 프레임워크인 Vuetify. 한글 번역을 해보겠다.

2021년 9월 10일
·
0개의 댓글
post-thumbnail

Vuetify Components 와 API

Vuetify Components 와 API

2021년 9월 8일
·
0개의 댓글
post-thumbnail

Nuxt/Vue.js에서 Vuetify(머티리얼 디자인) 버튼 마스터 하기 : 아이콘, 컬러, 그림자, 스피너

이번 포스팅에서는 초보자 기준으로 뷰티파이 사용법에 대해서 알아본다.Vuetify(뷰티파이)의 UI컴포넌트중 <v-btn> 하나만 잘써도 UI를 이쁘게 꾸밀 수 있다.

2021년 8월 28일
·
0개의 댓글
post-thumbnail

NUXT 에서 Vuetify (머티리얼 디자인) 사용하기

뷰티파이란?뷰티파이는 완전 UI 프레임 워크로 Vue.js위에 만들어졌으며 개발자들에게 풍부한 유저경험을 쉽고 빠르게 만들 수 있게 하는 것이 목표이다. 머터리얼 디자인 스펙을 베이스로 한 컴포넌트들을 완성도 있게 제공 한다.왜 뷰티파이인가?

2021년 8월 23일
·
0개의 댓글
post-thumbnail

Vue+Vuetify+Vue-Router 시작하기 - 6

오늘은 하루종일 나를 괴롭힌 $vuetify.goTo에 대해 이야기 해보고자 한다.이녀석이 왜 필요했냐면 버튼을 눌렀을 때 페이지 최상단을 가는 기능을 만들고 싶었는데,어디서 보니까 vue, vuetify에서는 쌩 js 기능을 만드는걸 비추한다고 들었다.그래서 기능을

2021년 8월 10일
·
0개의 댓글
post-thumbnail

Vue+Vuetify+Vue-Router 시작하기 - 4

입에 침바르고 하는 말이 아니다. 정말 신세계였다. 내가 css 건들면서 직접 수정할 만한 것이 없다. 다만 안드로이드에서 흔히보면 그 구글 머티리얼 디자인이라서 좀 식상할 순 있지만, 디자인에 대해 공부하고 머리 좋은 사람들이 모여서 만든게 안좋을리가 없잖아이거 쌩

2021년 8월 6일
·
0개의 댓글
post-thumbnail

Vue+Vuetify+Vue-Router 시작하기 - 3

다른거 할줄모르고 그냥 남자답게 vue-cli로 설치할거임.끝.(위에서 나온 preview로 설치했다가 vite.js가 뭔지 몰라서 한참 헤맴 디폴트로 빠르게 넘어가자.)설치가 완료되면 해당 메세지가 뜬다.그리고 뷰티파이를 설치하고나면 우렁각시가 내가 쓰지도 않은 코드

2021년 8월 6일
·
0개의 댓글
post-thumbnail

Vue+Vuetify+Vue-Router 시작하기 - 2

잉여주제에 기억이 소거되는 시간도 빠른 메모리를 가진 나님은 역시 갓 구글님께서 인수하신 유투브의 컨텐츠들을 참고하여 많은 지식을 습득할 수 있었다. 하지만 기억이 소거되는 시간이 TLC 보다 빠른 나의 두뇌는 휘발성 메모리인지라 이것을 장기간 담아내기 어려워 이 블로

2021년 8월 6일
·
0개의 댓글
post-thumbnail

Vue+Vuetify+Vue-Router 시작하기 - 1

Vuetify는 현재 vue 3 버전에서 동작하지 않아 부득이하게 vue 2 버전으로 시작해야함."The current version of Vuetify does not support Vue 3. Support for Vue 3 will come with the rel

2021년 8월 6일
·
0개의 댓글
post-thumbnail

Express.js + Vue.js 연동 (+Vuetify)

Express.js Node.js의 웹 프레임워크. Vue.js 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크. Prepare node.js 설치 https://nodejs.org/ko/download/ Install vue-cli Install expr

2021년 8월 3일
·
0개의 댓글

vuetify 컨텐츠 영역에 scroll 적용하기 (스크롤이 생길 때만 Scroll Top 버튼 표시)

전체 페이지가 아닌 헤더 아래에 스크롤 생성영역에 스크롤이 생기면 ScrollTop(△) 버튼 표시전체 페이지가 아닌 헤더 아래에 스크롤 생성css 조정 필요!v-app 을 이용했을 경우 v-application--wrap min-height이 100vh로 잡혀있음.

2021년 7월 23일
·
0개의 댓글

Vuetify IE 2.5.4 에러 정리

Vuetify IE 관련 에러1\. IE shadowRoot, lastMousedownWasOutside undefined ~ Error (마우스 클릭할 때 마다 에러 로그발생함) Error in directive click-outside inserted hook: "

2021년 7월 21일
·
0개의 댓글
post-thumbnail

vuetify speed-dial keep open

Vuetify Speed Dial Copompents(https://vuetifyjs.com/en/components/floating-action-buttons/가장 아래있는 버튼을 누르면 위에 버튼 (휴지통,+,연필) 이 뜨는데..버튼 외 다른 부분을 클릭하

2021년 7월 20일
·
0개의 댓글

Electron으로 앱개발 하기

Electron

2021년 7월 12일
·
0개의 댓글
post-thumbnail

Vuetify 초기설정

참고자료 : 짐코딩채널 => https://www.youtube.com/channel/UCZ30aWiMw5C8mGcESlAGQbA Vuetify란? Vue 기반 UI프레임워크이다. 구글의 Material Design을 기반으로 설계되었다. UI프레임워크를 이용하면.

2021년 7월 4일
·
0개의 댓글
post-thumbnail

[vue.js] vuetify v-data-table에서 v-slot 활용해서 custom table 만들기

(vue 2.6.0 버전이후 slot은 v-slot이라는 디렉티브로도 사용가능하며 slot을 대체해나갈 예정이다!)참고1\. v-slot은 부모 컴포넌트에서 자식 컴포넌트의 엘리먼트를 지정할때 사용한다.2\. v-slot은 template태그와 항상 함께 써야 한다.3

2021년 3월 29일
·
0개의 댓글
post-thumbnail

[vue.js] v-data-table 정렬이 안되는 것 같을때 해결방법

따라서, data table 컬럼에 sortable을 true로 한 컬럼은 세 가지 상태를 준수하게 된다.=> 미정렬 상태로 인해 sort가 안되는 것 처럼 보이지만 제대로 작동하는 것=> 이 부분이 거슬린다면 must-sort를 True로 변경하면 미정렬 상태는 없음

2021년 3월 29일
·
0개의 댓글