Rails 6 + Vue.js 3の初期設定

最初に

まだ巷で「Rails Vue」で検索すると、Vue.js 3ではなく、Vue.js 2系の話がでてきてしまう。

そんなわけで、Vue.js 3のインストール方法を簡単にメモしておく。

参考

Qiita: Vue.js チュートリアル for Rails エンジニア(Vue3 version)
この記事を基本的には参考にした。

Railsアプリを作る

$ ruby -v
ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [x86_64-darwin20]

$ rails -v
Rails 6.1.4

Ruby 3.0.0p0 と Rails 6.1.4 の組み合わせで詰まっている方を見たので、
Rubyのパッチバージョンは上げてた方がよさそう。

$ rails new vue3_sample -d postgresql
Railsの初期化

自分はPostgreSQLを使うので、rails newするときに-d postgresqlを指定した。
PostgreSQLを設定してなくてVue.js 3.0を試したいだけの方は、このオプションは外した方がよいだろう。

ここでrails newする際に注意が必要。
巷には--webpack=vueをつける話があるが、これはVue.js 2をインストールしてしまう。
少なくとも、今のRailsは、そうであった。 これはこれで参考になると思うが、Vue.js 3をインストールする際は別なので注意。

Rails

初期化

$ rails db:create
DBを作成する。SQLite3だと不要だったと思うが、PostgreSQLなどでは必要なはず。

$ rails s
ここまで出来たら、rails sでRailsが立ち上がるのを確かめる。
ここまではVue.js関係ないので、詰まったら他のところを見るのがよさそう。

ビューを作成

ルーティング、コントローラ、ビューを作る。
なんでもよいが、適当にBooksビューを作る。

config/routes.rb

Rails.application.routes.draw do
  root "books#index"
end

app/controllers/books_controller.rb

class BooksController < ApplicationController
  # def index
  # end
end

app/views/books/index.html.erb

<h1>Books#index</h1>
<div id="js-hello-vue"></div>

ここのid="js-hello-vue"がJSファイルを載せる起点となる。 ここめがけて、Vueを載せるイメージ。
js始まりのidなのは、そういう慣行である。

Vueインストール

ここから、ちゃんとVue.js

$ yarn -v
1.22.10

$ yarn add vue@next vue-loader@next @vue/compiler-sfc

巷では$ rails webpacker:install:vueでインストールする方法が説明されることがあるが、これはVue.js 2.0系の話なので気をつけよう。 Railsコマンドでは、Vue.jsのインストールに対応してないと捉えると良さそう。 対応する予定があるのか等は調べていない。

ちゃんと、コマンドが実行されていれば、package.jsonの中身で"vue"のバージョンが3以上になっているはず。 指定する際は@nextをつけると、Vue.js 3系が入る模様。

だいぶ省略していますが、package.jsonは以下のようになります。

{
  "dependencies": {
    "@vue/compiler-sfc": "^3.1.4",
    "vue": "^3.1.4",
    "vue-loader": "^16.2.0",
  }
}

config/webpack/environment.jsファイルを以下のように書き換える。

const { environment } = require('@rails/webpacker')

const { VueLoaderPlugin } = require('vue-loader')
 environment.plugins.prepend(
     'VueLoaderPlugin',
     new VueLoaderPlugin()
)

environment.loaders.prepend('vue', {
    test: /\.vue$/,
    use: [{
        loader: 'vue-loader'
    }]
})

module.exports = environment

また、config/webpacker.ymlextensions:.vueを追加する。

  extensions:
    - .vue
    - .mjs
    - .js
    - 

ここまでで、Vue.js 3を使う環境は整った。

Vue.js 3を使う

app/javascript/application.jsに下記の行を追加する。

require('./hello_vue.js')

そして、同ディレクトapp/javascriptに、今回は以下のファイルを作っていく。

  • app/javascript/hello_vue.js
  • app/javascript/hello.vue

hello_vue.jsapplication.jsから呼ばれ、hello.vuehello_vue.jsから呼ばれる。

app/javascript/hello_vue.js

import { createApp } from 'vue'
import App from './hello.vue'

document.addEventListener('DOMContentLoaded', () => {
  const selector = '#js-hello-vue';
  if(document.querySelector(selector)){
    createApp(App).mount(selector);
  }
})

const selector = '#js-hello-vue';は、文字列を入れている。Vueに置き換えたいHTMLのIDの文字列だ。
if文でこのIDがあるかどうか確かめて、このIDのタグがあればVueをマウントする。

マウントするVueは何かというと、import App from './hello.vue'の部分。

app/javascript/hello.vue

<template>
  <div>
  {{ hello }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      hello: "Hello, Vue.js 3.0"
    }
  }
}
</script>

<style scoped>
</style>

スクリプトの部分で、Vue.jsの雛形を作っている感じ。 ここから、さっきのimport App from './hello.vue'Appとして渡される。

これでVue.js 3.0が使えているはず。

最後に

未来の自分向けに書いたわけですが、未来の自分は参考になりましたか?