【Vue】railsにVueをインストールしてみた。

バージョン情報

• ruby 3.0.0
• rails 6.1.6.1
• yarn 1.22.19

今回は、ここからVue3を導入していく。

インストール

インストールコマンドは以下の通り。

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

これを実行すると以下のように出力されてインストール成功。5分とかからない。

yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 12 new dependencies.
info Direct dependencies
├─ @vue/compiler-sfc@3.2.45
├─ vue-loader@17.0.1
└─ vue@3.2.36
info All dependencies
├─ @vue/compiler-sfc@3.2.45
├─ @vue/reactivity-transform@3.2.45
├─ @vue/reactivity@3.2.36
├─ @vue/runtime-core@3.2.36
├─ @vue/runtime-dom@3.2.36
├─ @vue/server-renderer@3.2.36
├─ csstype@2.6.21
├─ hash-sum@2.0.0
├─ nanoid@3.3.4
├─ sourcemap-codec@1.4.8
├─ vue-loader@17.0.1
└─ vue@3.2.36
Done in 29.48s.

設定

各ファイルの内容をそれぞれ編集する。

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 #追加
    - .mjs
    - .js
    
   # 以下省略

hello vueの表示

次にvueを使って「Hello Vue」という文言をviewに表示する。
以下のファイルを作成し内容を編集する。

app/javascript/packs/hello_vue.js

import { createApp } from "vue";
import App from "../app.vue";
document.addEventListener("DOMContentLoaded", () => {
  const app = createApp(App);
  app.mount("#vue-app");
})

app/javascript/app.vue

<template>
  <p>
    {{ message }}
  </p>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: left;
}
</style>

そして、「Hello Vue」を表示したviewに以下の記述を追加。

view

<%= javascript_pack_tag 'hello_vue.js' %>
<div id='vue-app'></div>

すると以下のように表示される。

turbolinksとの共存

SPAではなく、既存のrailsアプリケーションの一部にvueを使用する場合などでは、turbolinksの機能の影響で、例えばlink_toメソッドなどによるページ遷移時にvueの要素が表示されない。

そこで、vue-turbolinksの使用によりこれを解決することができる。

導入方法は以下の通り。まず次のコマンドでパッケージをインストールする。

$ yarn add turbolinks vue-turbolinks

application.jsに以下を追加する。

app/javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import '@fortawesome/fontawesome-free/js/all';
import TurbolinksAdapter from 'vue-turbolinks' //追記

Vue.use(TurbolinksAdapter) //追記

Rails.start()
Turbolinks.start()
ActiveStorage.start()

参考