RailsでHelloVue3!!!

前回は、「rails new」のオプションでVueをインストールしました。
https://zenn.dev/newburu/articles/e21629af475d69

が・・・Vue2になるようで、Vue3を使うためには、手動でVue3のインストールが必要とのことでした。

という事で、やり直します！！

rails newでWebアプリケーションを作成

前回同様、まずは「rails new」します。

$ rails new -d mysql hello-vue3
$ rails db:create
$ rails s

Vue3用の各種パッケージをインストール

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

Webpackの設定

webpackの設定を変更して、Vueファイルに対して、「vue-loader」を使用するように設定します。

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」を追加します。

config/webpacker.yml

default: &default
  # ...

  extensions:
    # ...
+    - .vue

HellowVue3のページを作成する

$ rails g controller HelloVue index

viewを修正します。

app/views/hello_vue/index.html.erb

<h1>HelloVue#index</h1>
<p>Find me in app/views/hello_vue/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>

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

http://localhost:3000/hello_vue/index　にアクセスして確認します。

出来た！