Vue.js+Rails で linkt_to 経由の画面遷移でVue.js で作った画面を表示したいです

Question

概要

Rails のアプリケーションで問い合わせページを作成しております。Haml にエントリーポイントを作成し、 Vue コンポーネントを 表示しようとしていますが、この表示がうまくできず、解決したいです。

実現したいこと

該当の URL の ヘルパーパス を使ったリンク link_to ‘お問い合わせ’, contacts_path 経由でのアクセスだと、 Vue.js で作成したテンプレートが描画されないのですが、描画されるようにしたいです。

一方で、該当の URL は /contacts であり、開発環境の URL localhost:3000 に直接アクセスする、もしくはページを リロードすると Vue.js で作成したテンプレートが描画されます。

なぜ、 link_to 経由の画面遷移の場合 Vue.js で作成したテンプレート が表示されないのか、どのようにすれば表示できるのかご教示いただけると幸いです。

表示されない時

表示される時

環境

$ sw_vers
ProductName:	macOS
ProductVersion:	11.1
BuildVersion:	20C69

# 一部
ruby '3.0.0'
gem 'rails', '6.1.1'
gem 'webpacker'

確認したこと

1. ブラウザのコンソールにエラーは表示されていない

ブラウザの Dev Tools ではコンソールにエラーは表示されていないことを確認しました。

2. サーバーのログにはエラーが表示されていない

サーバーのログにもエラーが表示されていないことを確認しました。

web_1      | Started GET "/contacts" for 172.18.0.1 at 2021-02-07 02:20:16 +0000
web_1      | Processing by ContactsController#new as HTML
web_1      |   Rendering layout layouts/application.html.haml
web_1      |   Rendering contacts/new.html.haml within layouts/application
web_1      | [Webpacker] Everything's up-to-date. Nothing to do
web_1      |   Rendered contacts/new.html.haml within layouts/application (Duration: 39.8ms | Allocations: 3453)
web_1      |   User Load (0.5ms)  SELECT "users".* FROM "users" WHERE "users"."id" IS NULL LIMIT $1  [["LIMIT", 1]]
web_1      |   ↳ app/helpers/sessions_helper.rb:5:in `current_user'
web_1      |   CACHE User Load (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" IS NULL LIMIT $1  [["LIMIT", 1]]
web_1      |   ↳ app/helpers/sessions_helper.rb:5:in `current_user'
web_1      |   Rendered layouts/_navbar.html.haml (Duration: 16.0ms | Allocations: 1865)
web_1      |   Rendered layouts/_flash_messages.html.haml (Duration: 0.1ms | Allocations: 23)
web_1      |   Rendered layouts/_footer.html.haml (Duration: 0.2ms | Allocations: 199)
web_1      |   Rendered layout layouts/application.html.haml (Duration: 188.2ms | Allocations: 17986)
web_1      | Completed 200 OK in 198ms (Views: 195.4ms | ActiveRecord: 0.5ms | Allocations: 18728)
web_1      |
web_1      |

ファイル群

詳細は GitHub - yuki0920/supplebox at debug_contact_vue に掲載しております。

# app/controllers/contacts_controller.rb

class ContactsController < ApplicationController
  def new
    render 'new'
  end

  def create
  ...
  end
end

# app/views/contacts/new.html.haml
= javascript_pack_tag 'contact_message', 'data-turbolinks-track': 'reload'

#contact_message{'v-cloak': ''}

# app/javascript/packs/contact_message.js

import Vue from 'vue/dist/vue.esm'
import ContactMessage from '../ContactMessage.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#contact_message',
    components: { ContactMessage },
    render: h => h(ContactMessage)
  })
})

# app/javascript/ContactMessage.vue

<template>
  <div class="contact">
    <h1>お問い合わせ</h1>
    <p>お気軽にお問い合わせください!</p>
    <ValidationObserver v-slot="{ handleSubmit }">
      <form @submit="handleSubmit(submitForm)">
        <div class="form-group row">
          <label for="contact_name" class="col-sm-3 col-form-label">お名前</label>
          <ValidationProvider v-slot="{ errors }" rules="required" name="お名前" class="col-sm-9">
            <input v-model="formData.name" type="text" class="form-control" id="contact_name">
            <span class="error text-danger">{{ errors[0] }}</span>
          </ValidationProvider>
        </div>
        <div class="form-group row">
          <label for="contact_email" class="col-sm-3 col-form-label">メールアドレス</label>
          <ValidationProvider v-slot="{ errors }" rules="required|email" name="メールアドレス" class="col-sm-9">
            <input v-model="formData.email" type="email" class="form-control" id="contact_email">
            <span class="error text-danger">{{ errors[0] }}</span>
          </ValidationProvider>
        </div>
        <div class="form-group row">
          <label for="contact_title" class="col-sm-3 col-form-label">タイトル</label>
          <ValidationProvider v-slot="{ errors }" rules="required" name="タイトル" class="col-sm-9">
            <input v-model="formData.title" type="text" class="form-control" id="contact_title">
            <span class="error text-danger">{{ errors[0] }}</span>
          </ValidationProvider>
        </div>
        <div class="form-group row">
          <label for="contact_content" class="col-sm-3 col-form-label">お問い合わせ内容</label>
          <ValidationProvider v-slot="{ errors }" rules="required" name="お問い合わせ内容" class="col-sm-9">
            <textarea v-model="formData.content" class="form-control" id="contact_content" rows="3"></textarea>
            <span class="error text-danger">{{ errors[0] }}</span>
          </ValidationProvider>
        </div>

        <div class="form-group row justify-content-end">
          <div class="col-sm-9">
            <button type="submit" class="btn btn-success">送信する</button>
          </div>
        </div>
      </form>
    </ValidationObserver>
  </div>
</template>

<script>
import { extend, localize, ValidationObserver, ValidationProvider } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules'
import ja from 'vee-validate/dist/locale/ja.json'

// バリデーションルール
extend('required', required);
extend('email', email);

// メッセージのローカライズ
localize('ja', ja);

// axios
import axios from 'axios'
const addCsrfToken = () => {
  axios.defaults.headers.common = {
    "X-Requested-With": "XMLHttpRequest",
    "X-CSRF-TOKEN": document
      .querySelector('meta[name="csrf-token"]')
      .getAttribute("content"),
  }
}
export default {
  components: {
    ValidationObserver,
    ValidationProvider
  },
  mounted() {
    addCsrfToken()
  },
  data() {
    return {
      formData: {
        name: "",
        email: "",
        title: "",
        content: ""
      }
    }
  },
  methods: {
    submitForm() {
      axios.post('/contacts', this.formData )
    }
  }
}
</script>

<style scoped>
[v-cloak] {
  display:none;
}

p {
  font-size: 1em;
  text-align: center;
}
</style>

Answer 1

RailsにVue.jsを小さく導入する | count0.org を参考にさせていただき、自己解決できました。

結論、「Turbolinks」が原因でした。
Turbolinksのロードを待ってから、Vueインスタンスの生成を行う必要があることがわかりました。

エントリポイントのJavaScriptファイルを下記のように修正しました。

document.addEventListener('turbolinks:load', () => {
  if (document.getElementById('contact_message')) {
    const app = new Vue({
      el: '#contact_message',
      components: { ContactMessage },
      render: h => h(ContactMessage)
    })
  }
});