rails6 vue.jsのUIライブラリ「vuetify」を利用する

rails6 vue.jsのUIライブラリ「vuetify」を利用する

rails6で、vue.jsでUIライブラリ「vuetify」を利用までの手順を記述してます。railsのバージョンは6.1.0です。

環境

  • OS ubuntu20.10
  • ruby 2.7.2
  • rails 6.1.0
  • Postgresql 13.1 (dockerで構築)

vue.js環境構築

以下のコマンドを実行すれば、vue.jsを利用するにあたり必要なファイルを用意してくれます。

Foreman導入

Webpackerを毎回ビルドしてくれるので、導入しておくと便利です。

vuetifyインストール

vuetifyを利用するのでインストールしておきます。

vuetify利用

「app/javascript/packs」に「vty.js」という名前で、以下の内容でファイルを作成します。

「app/javascript/packs」で「test_vue.js」を以下のように編集して、作成した「vty.js」をインポートします。

後は「app/javascript」にある「app.vue」でテンプレートを作成して、

View側に以下のコードを追加すれば、利用できます。

ブラウザで確認すると以下のページが表示されると思います。

v-icon使用

アイコンを使用する場合は、@mdi/fontをインストールします。

「app/javascript/packs」の「vty.js」でインポートします。

「app/javascript」にある「app.vue」でテンプレートにv-iconを使用するため、追記します。

これで、アイコンが表示されるようになります。