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.yml
のextensions:
に.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.js
はapplication.js
から呼ばれ、hello.vue
はhello_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が使えているはず。
最後に
未来の自分向けに書いたわけですが、未来の自分は参考になりましたか?