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

# 環境
- Rails 7.0.8
- Vue.js 3.4.21
- Vue/cli 5.0.8
- PostgreSQL 14.11
- ubuntu 22.04.1

# 最初に実行するコマンド
```bash
# Gemfileに以下を記載
gem 'jsbundling-rails'
gem 'vite_rails'
```

```bash
bundle install # gemをインストール
```

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

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

```bash
# 以下のメッセージが出た場合は`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
```

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

```bash
# 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(),
  ],
});
```

# 参考記事

### 導入実況中継
https://qiita.com/KM9973/items/a237ee70edada86c4e12

### エラー対策
https://qiita.com/KM9973/items/4bcb049603fd7b15477d