はじめに

Rails7系にはWebpackerが非推奨なのでいままでのようにインストールことができません。そのため備忘録としてRails7にviteを使ってVue3を入れる方法をまとめてみました。

実行環境

Ubuntu:22.04.4 LTS
Ruby:3.1.2p20
Rails:7.1.3.4
Vue:3.4.27

Railsプロジェクトの新規作成

Railsプロジェクトを作成するために以下のコマンドを実行します。

rails new rails_vue_app
cd rails_vue_app

サーバーを起動するため以下コマンドを実行します。

rails s

以下の画面が表示されれば次へ進みます。

viteのインストール

Gemfileに以下を追記します。

Gemfile

# 追加
gem 'jsbundling-rails'
gem 'vite_rails'

viteをインストールするため以下のコマンドを実行します。

bundle install
bundle exec vite install

Vue3のインストール

Vue3をインストールするため以下のコマンドを実行します。
もしnpmが存在しないときはnpmをインストールしてください。

npm install --save-dev @vitejs/plugin-vue

vite.config.tsを以下のように設定します。

vite.config.ts

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        RubyPlugin(),
        vue(),
    ],
})

Vue/indexの新規作成

Vue/indexを新規するため以下を実行

rails g controller Vue index

routeに以下を追加する。

config/routes.rb

Rails.application.routes.draw do
    root to: 'vue#index' #追加
    get 'vue/index'
    # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

    # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
    # Can be used by load balancers and uptime monitors to verify that the app is live.
    get "up" => "rails/health#show", as: :rails_health_check

    # Defines the root path route ("/")
    # root "posts#index"
end

画面をリロードして以下の画面が表示されれば次へ進みます。

Vueファイルの作成

index.html.erbファイルに以下を追加する。

app/views/vue/index.html.erb

<div id="app"></div>

app/javascript/entrypoints/application.jsに以下を追加する。

app/javascript/entrypoints/application.js

// 以下を追加
import { createApp } from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  createApp(App).mount('#app')
})

app/javascript/app.vueを新規作成し、以下を追加する。

app/javascript/app.vue

<template>
    <p>{{ state.message }}</p>
</template>
  
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'App',
    setup() {
        return {
            state: {
                message: "Ruby on Rails + vite + Vue3!"
            }
        }
    }
})
</script>
  
<style scoped>
p {
    font-size: 2em;
    text-align: center;
}
</style>

画面をリロードして以下の画面が表示されれば完了です。

おわりに

Rails7系にviteを使ってVue3を入れる方法を紹介しました。ディレクトリ構成などがベストとは程遠いですが、これから勉強していこうと思います。

参考記事

Vue3、Rails7系を使って「Hello Vue」を表示させるまで

【備忘録】Vue.js3の導入設定・正常表示確認

Vue.jsのインストール｜【期間限定無料公開中】Vue.jsとRuby on Railsで作るリアルタイムチャット

Vite Ruby で爆速で Rails + Vue3 + TypeScript 環境を作成する！