Vuetify

Vueを使い始めてUIライブラリを探すと色々出てきますね。PrimeVue、BootstrapVue、Quasar、Buefyなど他にも選択肢はあります。今日はそのうちでも人気のVuetifyのインストールから基本的な使い方まで説明します。 Vue3の良いところ VueはReactと比べて初心者向けという位置づけで認識されがちです。しかし機能的にはReactに劣らず、書くコードの数も減ることがよくあります。個人的な意見になりますが、ReactのようにFacebookのような大企業のブランドがバックアップしていないというだけでマーケティングで負けてしまったように受けられます。 Vueは素晴らしいフレームワークで仕事でReactに縛られるという事がなければVueを使っていくべきだと思います。 なぜVuetify ①無料で使える Vuetifyはソースコードを公開しているオープンソースになります。MITライセンスなので安心して商用で使えます。必要があればソースコードをいじることもOKです。 ②フレキシブルなコンポーネント コンポーネントのカスタマイズがしやすいように作られているため個性を出しやすいです。また、Googleのマテリアルデザインをテーマに作成されているのでスッキリとした見た目でデザインができます。 ③ツールが豊富 FigmaのUIコンポーネントキットが使えます。（Figmaの使い方はこちら） Viteのビルドツールで作成されたVueにVuetifyを実装できます。 TypeScriptとJavaScriptの両方で使えます。 もし、わからに事があればDiscordのコミュニティに参加して質問ができる。などなど ViteでVueプロジェクトの作成 今回はVue CLIではなくViteを使います。Viteがスタンダードになってきているので是非使ってください。 yarnを使ってインストールする場合は次の記事を見てください。 アプリ名は自分の好きなものを付けてください。 ではプロジェクトフォルダに移動してライブラリをインストールします。 YarnでVuetifyをインストール yarnを使っている人は下記のコマンドで一発でVueとVuetifyがインストールできます。 このあとにプロジェクトフォルダに移動してテストサーバーを起動できます。 Vuetifyのインストール ではnpmを使ってVuetifyをインストールします。yarnを使わない人はこちらを使ってください。最初にも書いたようにViteでVueのプロジェクトを先に作成しておいてください。 Vuetifyの設定 では、VuetifyをインストールしたところでVue3で使えるように設定していきます。 ではsrc/main.jsを下記の様に上書きしましょう。 これで全部のコンポーネントをインポートしていますが、好みで必要なコンポーネントだけインポートすることも可能です。 ではテストサーバーを実行しておきましょう。 コンポーネントの使い方 ではsrc/App.vueにVuetifyのコンポーネントを入れてみます。 このようにグローバルでVuetifyのコンポーネントが使えるようになりました。 コンポーネントごとで使えるprosや設定が変わってくるので詳しくはドキュメンテーションを確認するようにしましょう。 スペーシング またスタイルを変更したい場合は下記の様にクラスを追加することでmarginやpaddingを変更することができます。 このようにma-5（マージン　オール）のクラスを追加することで簡単にスタイルが変更することができましたね。 詳しいスペースの使い方です。 このma-5は下記の要素が結合したものです。 {property}{direction}-{size} propertyの箇所は: directionの箇所は： sizeの箇所は 4pxずつ増えていきます: Breakpoints（ブレイクポイント） Flexboxを使ったリスポンシブなクラスを設定することができます。 デバイス コード タイプ レンジ エキストラスモール xs モバイル < 600px … Read more