建設予定地

当面はやったことの備忘録

Vuetifyでちょっとリッチな画面を作る

こんにちは!この記事はLOCAL学生部アドベントカレンダー22日目への寄稿です。

adventar.org

今回はVuetifyのUIコンポーネントはいいですね、というお話です。
vuetifyjs.com

Vue.js+Vuetifyの素振りとして自作のポートフォリオを作り直してみたのですが、ほぼCSSなしでいい感じにレイアウトを組めてとても良いですね。
実装されているコンポーネントの種類が豊富さが凄い。カレンダーやグリッドデザイン、カルーセルからタイムライン表示までetc.

基本的にはメインのコンポーネントに固有コンテンツを記述し、メニューバーはv-navigation-drawer, ヘッダーはv-app-bar,フッターはv-footerといったようにパーツ単位でUIコンポーネントを選択してレイアウトを組むことになりますが、プラモデルを組んでいる感覚に近いです。

ワイヤーフレームの例を見ていると、Discordのクローンなんかも作れそうですね。

余談ですがUIについて
mkan-0141.hatenablog.com このようなエントリーを見かけて、次はFlutterを使って何か作ってみようかなぁと考えています。