既存のRailsアプリ（slim利用）にVue.jsをテスト導入してみる覚え書き。

↓の派生です。

準備

Gemfileに

# Use webpack
gem 'webpacker', github: 'rails/webpacker'

を追加して、terminalで

bundle install

bin/rails webpacker:install

bin/webpack

の順に入力。

bin/webpackで /app/javascripts の中に /packs/application.js が出来ているはず。今回使わないので消しちゃってもOK。

Vue.jsを導入

rails webpacker:install:vue

vueを使うための色々が入ってくれる。/app/javascripts を確認。

これでvueの導入は完了。

念のため確認しよう

app.slimを新規作成

index.slimは使っていてまだ変更したくないので、テスト的にapp/views/pagesにapp.slimというファイルを作ってそちらに飛ばしてチェックしていきます。

app.slim

doctype html
html lang="ja"
 head
 body
   include app/views/layouts/_header
   
   = yield
   = javascript_pack_tag 'hello_vue'

上記のようにheader足してる場合には念のためapp.vueのstyleにmargin-top: 50px;とか仮で適当に追記しておいてね（隠れちゃうから）

routes.rbに記述を追加

get〜〜の部分を追加

Rails.application.routes.draw do
 get "/" => "pages#app"
end

これでhttp://0.0.0.0:3000/はindexではなくapp.slimが該当するようになる。

railsサーバ起動。

rails s

http://0.0.0.0:3000/ に既存のindexではなく「Hello Vue!」と表示されていればOK。

head部分に仮で

  script src="https://cdn.jsdelivr.net/npm/vue"

これ入れてた場合は消せます。