Vite Rubyを使ってVueアプリケーションを動かしてみた

Ruby Rails Vue

高速と噂のBetaがとれたViteで、BackendがRuby(Rack)なVueアプリケーションを開発できたら、最高かもしれない。 ということで調べてみると、Vite Rubyなるものがあったので動かしてみました。

参考

手順

事前準備

  1. Node.jsのバージョンが12以上であることを確認する。

     $ node --version

インストール

  1. Gemfileに、フレームワークに応じたgem 'vite_xx'を追記する。
    • Rails: vite_rails
    • Hanami: vite_hanami
    • Padrino: vite_padrino

  2. インストールする。

     $ bundle install

セットアップ

  1. vite_rubyをセットアップする。

     $ bundle exec vite install`

  2. package.jsonにVueなどを追記し、インストールする。

     $ cat package.json
 {
   "dependencies": {
     "vue": "^3.0.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.1.5",
     "@vue/compiler-sfc": "^3.0.5",
     "vite": "^2.1.2",
     "vite-plugin-ruby": "^1.0.16"
   }
 }
 $ npm install

  3. HTML（テンプレート）にヘルパーダグを追加する。

     $ cat index.slim
 …略
 = vite_client_tag
 = vite_javascript_tag 'application'

動作確認

  1. dev-serverを起動する。

     $ bin/vite dev

  2. Rackアプリケーションを起動する。

     $ bundle exec rails s

  3. ヘルパータグを追加したページにアクセスする。コンソールにVite ⚡️ Rubyが出力されるはず。