環境
- 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）は以下のとおり
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することができる。
<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を用いる場合の設定
<div id="app"></div>
# ここでVueアプリケーション読み込み
<%= vite_javascript_tag 'entrypoints/application' %>
(参考)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を用いる場合の設定
import { defineConfig } from 'vite';
import RubyPlugin from 'vite-plugin-ruby';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
RubyPlugin(),
vue(),
],
});
参考記事
導入実況中継
エラー対策