Rails6 × Vue3 アプリ立ち上げ手順

記事作成意図

ネット上にRails×Vue3の情報が少ない(Vue2ばっかり)のでまとめておきました。

Railsアプリを新規作成

rails new -d mysql アプリ名

Vue用インストール

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

DB作成

rails db:create

サーバが起動することを確認

rails s

environment.jsを編集

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const { DefinePlugin } = require('webpack')

environment.plugins.prepend(
    'VueLoaderPlugin',
    new VueLoaderPlugin()
)

environment.plugins.prepend(
  'Define',
  new DefinePlugin({
    // __VUE_OPTIONS_API__: false,
    __VUE_OPTIONS_API__: true,
    __VUE_PROD_DEVTOOLS__: false
  })
)

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

module.exports = environment

extensions追加

config/webpacker.yml

  extensions:
　　　　　　　　# 「 - .vue」を追記
    - .vue
    - .mjs
    - .js
    - .sass
　　　　　　　　# ・・・

コントローラ作成

rails g controller コントローラ名 index

ビューの編集(Vueから表示させるブロックを作成しておく)

app/views/コントローラ名/index.html.erb

<h1>HelloVue#index</h1>
<p>Find me in app/views/コントローラ名/index.html.erb</p>
<%# 以下を追記 %>
<%= javascript_pack_tag 'hello_vue.js' %>
<div id='vue-app'></div>

Vueファイル作成

app/javascript/app.vue

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

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

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

jsファイル作成

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");
});

rails s　でサーバー立ち上げ後、http://localhost:3000/コントローラ名/index
にアクセスし、「Hello Vue3!」と表示されれば成功。