policy

Compile js manually using webpack without using gem webpacker which is included by default in rails. Load vue.js in the entry file and use component to create the appearance of the app. Load the js built using webpack with the rails app, and load the component into the app.

Current implementation details

Succeeded to display the h1 element defined by component in index.html.erb as shown in the image

Today's implementation details

* Since gitignore was not reflected at the beginning, correct it by the following procedure.

Edit gitignore
Delete cache with the following command

git rm -r --cached . //Delete whole file cache

3.commit & push

After tweaking various settings, I was able to load js compiled with webpack properly

Conclusion I did the following

Change assets compilation target in application.rb

config.assets.paths << Rails.root.join("public/javascripts")

Increase the compilation target of js and css in assets.rb (application.rb seems to be good to write)

Rails.application.config.assets.precompile += %w(*.js *.css)
Rails.application.config.assets.precompile << /(^[^_\/]|\/[^_])[^\/]*(\.js|\.css)$/

Make manifest.js read files under publick/javascripts

//= link_directory ../../../public/javascripts .js

Doesn't it seem that files under public will not be read just by describing them in application.rb? Because it feels like it, I forcibly loaded it with manifest.js. There seems to be another way, for example, building a file compiled using webpack in assets/javascritps.

So, if you do rails s with this ...

** I was able to display the browser safely. ** **

However

Failed to mount component: template or render function not defined

What! ??

It looks like the component made with Vue.js cannot be read. Do you want to check it out ...

Hit such an article

http://howdy.hatenablog.com/entry/2016/11/08/230439

Apparently it is necessary to set resolve.

So add the following description to webpack.config.js

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  },

This is a safe solution! !! !! !! He read the Hello! Set in component!

Sidebar.vue

<template>
  <h1>Hello!</h1>
</template>

<script>
</script>

App.vue

<template>
  <div>
    <sidebar></sidebar>
    <chat-container></chat-container>
  </div>
</template>

<script>
import Sidebar from './components/Sidebar.vue'
import ChatContainer from './components/ChatContainer.vue'

  export default {
    components:{
      Sidebar,
      ChatContainer
    }
  }
</script>

main.js

import Vue from 'vue';
import App from './App.vue';

// App.Render vue as an entry
new Vue({
  el: '#app',
  render: h => h(App)
})

index.html.erb

<div id="app"></div>

I don't understand why it was solved, so I organized it.

When using vue-loader or vueify, templates inside *.vue files are pre-compiled into JavaScript at build time. You don’t really need the compiler in the final bundle, and can therefore use the runtime-only build.

Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts, you should use it whenever you can. If you still wish to use the full build instead, you need to configure an alias in your bundler:

(Reference: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only)

As far as I can see from this article, when using vue-loader, you can use the file in the runtime state, so you don't need to use the fully compiled file. But if you still want to use a fully compiled file, you need to set resolve

I think I'm saying. And this time I'm using vue-loader. In other words, maybe the way to read the vue file is not good? I'm not sure, but I could read it, so it's OK. Let's check again whether the performance is good or bad.