Rails7系にviteを使ってVue3を入れてみた

## はじめに

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

https://github.com/eyamagishi/rails_vue_app

## 実行環境

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

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

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

```bash
rails new rails_vue_app
cd rails_vue_app
```

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

```bash
rails s
```

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

![スクリーンショット 2024-06-09 121152.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954837/5d7ac4f0-c9ee-9cfd-9365-e63b05fc129a.png)

## viteのインストール

`Gemfile`に以下を追記します。

```ruby:Gemfile
# 追加
gem 'jsbundling-rails'
gem 'vite_rails'
```

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

```bash
bundle install
bundle exec vite install
```

## Vue3のインストール

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

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

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

```typescript: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を新規するため以下を実行

```bash
rails g controller Vue index
```

routeに以下を追加する。

```ruby: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
```

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

![スクリーンショット 2024-06-09 122100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954837/d53b16d3-4527-6ead-5fc9-6828bb55a0a3.png)

## Vueファイルの作成

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

```erb:app/views/vue/index.html.erb
<div id="app"></div>
```

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

```javascript: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`を新規作成し、以下を追加する。

```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>
```

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

![スクリーンショット 2024-06-09 113638.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954837/2e9c8d33-a17f-9521-8aa4-84e4139a4be9.png)

## おわりに

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

## 参考記事

[Vue3、Rails7系を使って「Hello Vue」を表示させるまで](https://qiita.com/kobayashimakoto/items/12cc6c7834023df6fa39)

[【備忘録】Vue.js3の導入設定・正常表示確認](https://qiita.com/KM9973/items/1e9329de57bb8fafb9f3)

[Vue.jsのインストール｜【期間限定無料公開中】Vue.jsとRuby on Railsで作るリアルタイムチャット](https://zenn.dev/tmasuyama1114/books/vue-rails-chat/viewer/vue-js-installation)

[Vite Ruby で 爆速で Rails + Vue3 + TypeScript 環境を作成する！](https://qiita.com/h-kawamoto/items/48eb32ed88219cbe744f)