既存のrailsにvueを取り込んで、自作vueファイル(コンポーネント作成)

bundle exec rails webpacker:install:vue

を実行

<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
をかいたらhello_vueが表示された

次は自作コンポーネントを表示してみる

apps/javascript/packs/components/mindmaps.vue

<template>
<div>hello</div>
</template>

js/packs/mindmaps.js

import Vue from 'vue'
import mindmaps from '../packs/components/mindmaps.vue'

document.addEventListener('DOMContentLoaded', () => {
  var app = new Vue({
    el: '#mindmaps',
    components: {
      "mindmaps": mindmaps
    },
    render: h => h(mindmaps)
  }).$mount()
  //document.body.appendChild(appExplain.$el)
})

mandalarts/index.html.erb

<%= javascript_pack_tag 'mindmaps' %>

Webpacker::Manifest::MissingEntryError in Mandalarts#index

このようなエラーが表示された。コンパイルされないのが原因。

docker-compose exec web rails webpacker:compile
Everything's up-to-date. Nothing to do

エラー変わらず。

docker-compose exec web bin/webpack

でコンパイルは成功したが、

Failed to load resource: the server responded with a status of 404 (Not Found)

コンソールでこのように表示されてる

docker-compose exec web rails assets:precompile

も実行してみる

yarn install v1.22.15
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > vue-loader@15.9.8" has unmet peer dependency "css-loader@*".
[4/4] Building fresh packages...
Done in 87.48s.
I, [2021-12-05T15:56:51.801169 #117] INFO -- : Writing /ideaFrameworks/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js
I, [2021-12-05T15:56:51.802269 #117] INFO -- : Writing /ideaFrameworks/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js.gz
I, [2021-12-05T15:56:51.806731 #117] INFO -- : Writing /ideaFrameworks/public/assets/application-a473296405ebb8ad5f238eb855721d298dc5c1d42eec218574e3e1033f8e4dca.css
I, [2021-12-05T15:56:51.810116 #117] INFO -- : Writing /ideaFrameworks/public/assets/application-a473296405ebb8ad5f238eb855721d298dc5c1d42eec218574e3e1033f8e4dca.css.gz
I, [2021-12-05T15:56:51.814831 #117] INFO -- : Writing /ideaFrameworks/public/assets/mandalarts-89fd9d5d1d6101343c7fd979b7ee9cd681470b8f1d49d614c1f940fcabd749b9.css
I, [2021-12-05T15:56:51.817922 #117] INFO -- : Writing /ideaFrameworks/public/assets/mandalarts-89fd9d5d1d6101343c7fd979b7ee9cd681470b8f1d49d614c1f940fcabd749b9.css.gz
Everything's up-to-date. Nothing to do

と成功した。

がエラー変わらず。

docker-compose up やりなおし

それでもうまくいかない。

過去の俺の記事がぐぐったらでてきた。

mindmaps.js

import Vue from 'vue'
import mindmaps from '../packs/components/mindmaps.vue'

document.addEventListener('DOMContentLoaded', () => {
  var app = new Vue({
    el: '#mindmaps',
    components: {
      "mindmaps": mindmaps
    },
    render: h => h(mindmaps)
  }).$mount()
  document.body.appendChild(app.$el)
})

これでいけた！！

document.body.appendChild(app.$el)
を書いてなかった。

ありがとうございます。過去の俺。

[Vue warn]: Cannot find element: #mindmaps

みたいな警告でてるけど、とりあえず良かった。

いらん依存関係の整理に悩むくらいなら最初からやり直せばよかった。。。。

mindmaps.js

import Vue from 'vue'
import mindmaps from '../packs/components/mindmaps.vue'

document.addEventListener('DOMContentLoaded', () => {
  var app = new Vue({
    components: {
      "mindmaps": mindmaps
    },
    render: h => h(mindmaps)
  }).$mount()
  document.body.appendChild(app.$el)
})

el: '#mindmaps',の部分消せば警告もでずに

いけた。

よかった。