RailsにVue.js導入のテストをしてみる

Railsアプリに、
JSの比較的新しいフレームワークであるVue.jsを組み込んでみよう
ということを計画していてその準備中。

そのための新しいRaisプロジェクトを立ち上げる前に、
今日はすでに自分で作っていたRailsのブログアプリに、
部分的に導入してみて挙動を確認してみた。

まずは、JS周りのファイルを管理してくれるgem 'webpacker'を入れて、$bundle install

gem 'webpacker', github: 'rails/webpacker'

webpacker、そしてVue.jsのファイルをインストール

$ rails webpacker:install

$ rails webpacker:install:vue

自動でたくさんファイルができるので、
それらを編集していく。

JSファイルのコンパイルはこのコマンド。

$ bin/webpack-dev-server

コンパイラとVueのバージョン不一致でエラーが出たら、Vueのバージョンを上げてあげる。

yarn upgrade vue

せっかくなのでVue.jsで簡単なTODOリストを。

このTODOリストのコンポーネント自体は、
ドットインストールのVue.jsのレッスンのもの。

Image from Gyazo



ただ、
チェックボックスCSSがうまく当たらない関係で見えない。
このアプリ、実験的にいろんなライブラリとかCSSフレームワークとか
いろいろ入れ込んでるからかな。
あと、ローカルストレージもサイレントになっててデータが保存されないけど。
その辺はこれからの課題ということで。まあ、とにかくRailsに組み込む流れは確認できた。