みんな大好き(?)Vuetifyですが、割と日本語での記事は多くありません。(自分調べ)
今担当しているプロジェクトでVuetifyを採用して２年ほど経って、いろいろと知見がたまってきたので、Qiita風のUIを作りながら画面構築のテクニックを公開していきたいと思います。
ある程度コンポーネントごと区切って公開していきます。
(最終的にはNuxt.jsでアプリケーションとして公開できるといいな )

Vuetifyとは

VuetifyはVue.jsで利用できる、マテリアルコンポーネントフレームワークです。
あらかじめWEBアプリケーションを構築するにあたって必要なコンポーネントはほとんど揃っているので、スタートアップ時のモック作成や、画面を仮組みするときに力を発揮します。(運用でも問題なく使えます。)
スタイルを書かずに綺麗な画面を作れるので、フロントエンドエンジニアのモチベーションが上がることも間違いなしです。

目次

あくまでもQiita風なのでご了承を。
(そもそも完コピするならVuetify必要ないですし )

ちょっとずつ書いていきます。
(Vuetify2がリリースされたので、書き直し中。。。)

ヘッダー
- チーム切り替えメニュー
- ホーム・コミュニティーメニュー
- キーワード検索フィールド
- ストック一覧リンク
- 通知メニュー
- ユーザーメニュー
- レイアウト・レスポンシブ対応
フッター
トップ画面
- タブ
- 記事一覧

そのほか

こんなコンポーネントどう作るの？とか質問ありましたら、コメントください。