More than 3 years have passed since last update.

既存のRailsアプリにVuetifyを導入した

Last updated at 2020-11-13Posted at 2020-11-13

はやさを求めるなら

　Vue.jsが無事にできるようになったので、Vuetifyも、という手筈になった。Vuetifyとは素敵なコンポーネントがつまったフレームワークである。いちから作らなくてもボタンとかスライドとか、いちいちかっこいいやつがある。かっこいい。

　早速ドキュメントをみながら導入を試みた。しんどかった。全部英語だった。

　はじめは既存のものに導入とか考えずに、無からやってみた。まずはVueのCLIというやつが必要らしい。公式を参考に入れよう。

$ yarn global add @vue/cli

　そしてvueコマンドでつくる。

$ vue create my-app

　数多くのファイル群ができるが、そこで以下のコマンドを入力する。

$ yarn serve

　このyarn serveはpackage.jsonで定義されたオリジナルのスクリプト。
　"serve": "vue-cli-service serve",となっている。

　実行すると以下のようにハローワールドができる。やったぜ。

　こんなページが表示された。成功だ。

　既存のアプリに入れ込むやり方だが、ここが参考になった。というよりほぼこの記事。ここの「3. Vuetifyをインストール」からやっていった。

　ただ、おかしなエラーが出た。当時の記憶は定かではないが、そのままではうまくいかなった気がする。エラーログに以下のissueへのリンクがのっていた。

"$attrs is readonly" and "$listeners is readonly"

というやつだった。

　上記のリンクを追っていくと、えらい人が回答を述べていた。
https://github.com/vuetifyjs/vuetify/discussions/4068#discussioncomment-24984

　こうするといいらしい。

config/webpack/environment.js

//中略　
// 以下を追記

environment.config.merge({
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
})

　そうしたらできた。ボタンが表示できた。

　やったね。

　さて、無事にボタンが導入できたけどもとあった文字がすっごいしたのほうへ行ってしまった。ここらへんのデザインを修正しないといけない。どうすればいいのだろう。

　次回もお楽しみに。