環境

Rails 7.0.8
Vue.js 3.4.21
Vue/cli 5.0.8
PostgreSQL 14.11
ubuntu 22.04.1

最初に実行するコマンド

# Gemfileに以下を記載
gem 'jsbundling-rails'
gem 'vite_rails'

bundle install # gemをインストール

# Viteをインストール
# Railsアプリのルートディレクトリで以下のコマンドを実行
bundle exec vite install
# または以下でも可能らしい
rails vite:install

# Vue.jsをインストール
# Railsアプリのルートディレクトリで以下のコマンドを実行
npm install vue@3

# 以下のメッセージが出た場合は`node.js`のバージョンが不一致。
# nvmなどでバージョンを合わせることが好ましい。
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'rollup@4.12.1',
npm WARN EBADENGINE   required: { node: '>=18.0.0', npm: '>=8.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.20.1', npm: '9.8.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'vite@5.1.5',
npm WARN EBADENGINE   required: { node: '^18.0.0 || >=20.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.20.1', npm: '9.8.0' }
npm WARN EBADENGINE }

added 16 packages, and audited 49 packages in 3s

7 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

# nvmを用いたnode.jsのインストール
nvm install --lts # 最新のLTSバージョンをインストール
nvm install 18.0.0 # バージョンを指定してインストールする場合（例えば、node.18.0.0）
nvm install node # 最新バージョンをインストール

# nvmを用いたnode.jsのバージョン切り替え
nvm use node # 使用するバージョンを切り替え
nvm use (version) # バージョンを指定して切り替え

Vueアプリケーションのマウント

エントリポイントの設定

app/javascriptを使用する場合、Vue.jsのエントリポイント（例: application.js）は以下のとおり

app/javascript/entrypoints/application.js

console.log('Vite ⚡️ Rails')
console.log('Visit the guide for more information: ', 'https://vite-ruby.netlify.app/guide/rails')
import 'vue2-animate/dist/vue2-animate.min.css';
import { createApp } from 'vue';
import ExampleComponent from '../components/ExampleComponent.vue';

const app = createApp(ExampleComponent);
app.mount('#app');

Vueコンポーネントの配置

Vueコンポーネントは、app/javascript/componentsなど、app/javascript内に適切なサブディレクトリを作成して管理。
Vueコンポーネントのスタイルは、styleタグ内に直接記述するか、別のスタイルシートファイルに定義してVueコンポーネントからimportすることができる。

app/javascript/components/ExampleComponent.vue

<template>
  <div>
    <button @click="toggleShow">Toggle</button>
    <transition name="bounce">
      <p v-if="show">Vue.jsでリッチなインタラクション!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    }
  }
}
</script>

RailsビューからのVueコンポーネント呼び出し

Webpackerを使用する場合、ビューにJavaScriptパックタグ（javascript_pack_tag）を含めると、コンパイルされたJavaScriptファイルを含めることができる。
Viteを使用している場合、vite_javascript_tag(vite_railsのヘルパーメソッド)を使用することで、開発時にはViteの開発サーバーから提供されるファイルを、本番環境ではビルドされたファイルを読み込むようになる。

viteを用いる場合の設定

app/views/tops/index.html.erb

<div id="app"></div>
# ここでVueアプリケーション読み込み
<%= vite_javascript_tag 'entrypoints/application' %>

(参考)application.html.erb

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>VueRails</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
    <%= vite_client_tag %>
    <%= vite_javascript_tag 'application' %>
  </head>

  <body>
    <%= yield %>
    <%= vite_javascript_tag 'application' %>
  </body>
</html>

余談

Rails7では、デフォルトでImportmapを使ったJavaScriptの管理が導入されており、Webpackerやその他のJavaScriptバンドラーへの依存が減少している。そのため、javascript_pack_tagの代わりに、Rails7のプロジェクトでImportmapを使用している場合は、javascript_include_tagを使うか、Importmapの機能を直接利用することも可能である。

Importmapを使う場合

Rails7でVue.jsなどのフロントエンドライブラリを使用する場合、Importmapを通じてJavaScriptを管理することが可能である。
ただし、Importmapは主に小規模なライブラリや直接ブラウザで実行可能なJavaScriptモジュール向けに設計されており、Vue.jsのような大きめのライブラリをImportmapで直接扱うことは推奨されていない。

ViteやWebpackを使う場合

ViteやWebpackなどのモダンなフロントエンドビルドツールをRails7プロジェクトで使用する場合、javascript_pack_tagの代わりに、それぞれのツールに応じたタグヘルパーを使用する。
Viteを使用している場合は、vite_javascript_tagを使用す。

ViteやWebpackerの設定

vite.config.jsやwebpack.config.jsなどのビルドツールの設定ファイルを、app/javascriptディレクトリを基点とするように調整する必要がある。これには、ソースディレクトリ、出力ディレクトリ、エントリポイントのパスなどの設定が含まれる。

viteを用いる場合の設定

vite.config.ts(vite.config.js)

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

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

参考記事

導入実況中継

エラー対策