Vuetify
https://gyazo.com/d846c733283f96e90d5ff2c99f7a20cf
Material Design基準のVue.js向けUI Framework
Element UIとの比較
NPM Trends: Compare NPM package downloads
star数は負けているがダウンロード数は多く、流れが来ているように感じる
昔負けてた
多ブラウザ対応、日本語情報多いなど
日本では優先的に採用していいと思う。
中国は、Element UI
アイコン
Material Design Icons
Form フォーム UI
validation バリデーション
:rules="rule"
サクッと作るならこれ
Vee-validate
Vuelidate
DatePicker UI
和暦
Vuetifyのdatepickerを使って【和暦】＋【年度/月】pickerを作ってみた - Qiita
addd Form jpDate menu · KiichiSugihara/vuetify-sandbox@2036735
Progress Indicator Loading UI
Progress linear component — Vuetify.js
パスワード Password強度のバー
Vuetify + zxcvbnでパスワード強度メーター付きのパスワードフォームを作る - Qiita
Dialog ダイアログ UI
Modal モーダル UI
DatePicker UIとか
面白い点
プロパティで出現場所を変えることが可能
Fullscreen
画面遷移せずにSearch 検索 UIやForm フォーム UIを表示、実行できる
状態変数とかの管理、受け渡しが楽になることあり
パンくずリスト Breadcrumbs
Vue Routerで挟む
GitHub.iconadd Form breadItem · KiichiSugihara/vuetify-sandbox@90364d2
Table 表 UI
検索
headerのvalueを与えないと検索できない
ページネーション変更
vue.js - How to set initial 'rows per page' value in Vuetify DataTable component? - Stack Overflow
IE対応
ページネーションぶっ壊れ
Bug Report Data Table footer does not render properly in IE11 · Issue 9790 · vuetifyjs/vuetify
vuetify-sandbox/global.scss at 3fb1bbebcdc71f14b1cd171beac1af3c2e4787e3 · KiichiSugihara/vuetify-sandbox
直しました 😊
Style
Color 色 UI
plugins/vuetify.jsで修正する。
細かくなるなら別ファイルに分けると良さそう
vuetify-admin-dashboard/src/plugins at master · ClintOxx/vuetify-admin-dashboard
困りごと
IE11対応
Browser support — Vuetify.js
ポリフィル Polyfillを挟んで、Build ビルドすればいける
→真っ白にならなくなる
CSSずれは、別対応必要
issue見る
Bug Report v-data-table pagination formatting error in IE11 · Issue 9185 · vuetifyjs/vuetify
Bug Report Menu width in IE11 · Issue #8338 · vuetifyjs/vuetify
Icon アイコン読めない
append-icon="search"など
npm install material-design-icons-iconfont
vuetify.js
import "material-design-icons-iconfont/dist/material-design-icons.css";
Vuetify 2.x でiconが表示されない / cannot show icons using Vuetify(2.x) - Qiita
Radio Button ラジオボタンの値にundefinedが渡される
validationかけたFormで発声
原因不明、調査中
個人的なこと
GitHub.iconKiichiSugihara/vuetify-sandbox: vuetify-sandbox
実務
productionレベルで使用してる
大体のコンポーネント触ってる、吟味してる
TODO:暇な時にノウハウメモ
主要コンポーネント、ハマりどころごとにノート分けたい
元号Datepickerフォーム GengoDateFormコンポーネントオープンソース化
郵便番号による自動入力フォーム PostalCodeFormコンポーネントオープンソース化
その他
Storybook
vue-cli-plugins/packages/vue-cli-plugin-vuetify-storybook at master · vuetifyjs/vue-cli-plugins
Vuetify2をStorybookで動かしてみた (後編) - Freegian
Storybook TypeScript
💯Nuxt.js(TypeScript) × Vuetify × Storybookを使用して開発環境を再構築してみる - Ikkyu's Tech Blog
参考に作成GitHub.iconKiichiSugihara/nuxt-ts-vuetify-storybook
注意点
sassうまく行かない
vue-cli3→yarn add vuetifyで入れた
Componentの扱い
基本的にViewsに直で使うと便利
Componentに混ぜてオリジナルのcomponentを使うと、Propsの扱いがだるい、デフォルトのメリットが減る。(Slot スロット Vue)
参考レポジトリ
vuetifyjs/awesome-vuetify: 🎉 The best resources related to Vuetify
💯ClintOxx/vuetify-admin-dashboard: A Crud Admin panel made from Vue js and Vuetify
davellanedam/vue-skeleton-mvp: VueJs, Vuetify, Vue Router and Vuex skeleton MVP written on JavaScript using async/await built to work with API REST skeleton: https://github.com/davellanedam/node-express-mongodb-jwt-rest-api-skeleton
tokyo-metropolitan-gov/covid19: 東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website
参考記事
TypeScriptとクラススタイルで始めるVuetify生活 ｜ DevelopersIO
Vuetify導入によるTypeScriptエラー
【Vue.js: Vuetify】Dialogを別コンポーネントで分ける - じんのアウトプット日記(だいたい毎日更新)
5 Points Of Customizing Vuetify - Speaker Deck
vuetifyのテーブルが簡単高機能でオシャレ　使い方 - Qiita
Vue & Vuetifyでバリデーション付きのフォームを作ってみる - Qiita
Vuetify2.x でよく使うUIComponents まとめ - Qiita
Vuetify.jsのSheet, Alert, Avatar, Badge, Iconコンポーネントについて - Qiita Alerts
Build a Simple CRUD App with Airtable, Vue + Vuetify - DEV Community 👩‍💻👨‍💻