I tried incorporating the principle of a single file component into a rails 6 app. I'm not sure.

Single file component principle

How to proceed with development to create a vue file for each component. In other words, it seems good to think that it refers to handling HTML as a component for each part so that it can be called anywhere.

The opposite of this is called a global component.

new Vue({ el: '#container '})

Create a vue file targeting the container in the form of, and load it on each page. This writing is good for small-scale development, but it has some drawbacks for large-scale development. Above all, I want to avoid having the variable definitions of all components in common. Therefore, it is better to develop according to the principle of single file component that is componentized for each HTML used.

Writing a vue file with a single component looks like this

<template>
  <div class="side_bar">SideBar</div>
</template>

<script>
</script>

<style>
 .side_bar {
  width: 300px;
  background-color: green;
}
</style>

Specify HTML in the template part, js in script, and css in style. Make this for each HTML part. By doing this, each part can be handled as one file, so it is easy to start over. Which css is this class? There is no such question.

I load the created component with the rails application, but this time

The parent js that loads each component is the entry file. When you build this and load it with the rails app, the settings of each component are reflected in the app.

main.js (entry file)

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

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

App.vue (parent component)

<template>
  <div class="container">
    <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>

<style>
.container {
  display: flex;
  margin: auto;
  width: 70%;
  height: 100vh;
}
</style>

Compile this with webpack. webpack.config.js is as follows

module: {
    rules: [
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
    ]
  },
    (abridgement)
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  },
  plugins: [new VueLoaderPlugin()]

I think the important thing is the loader and resolve options, so it doesn't matter Is omitted. I was a little addicted to the fact that when loading css-loader and style-loader, I had to use the use option instead of the loader option for some reason. Is it because it loads multiple loaders?

When you start the rails server after compiling, you can see that the html and css written in separate files like the image are reflected exactly and are integrated into one view.

reference

· Official documentation for single file components

https://jp.vuejs.org/v2/guide/single-file-components.html

-How to realize a single file component using webpack

https://qiita.com/tkhr/items/ac22019c891fe8fa5f91