How to properly divide a project written in Vue.JS into components?

Question

Vue.js

I started studying VUE
. I found a ready-made example of a small project LINK . I am trying to adapt it to my needs
. It is written roughly in one module, but I would like to ask and find out how to break this functionality into separate modules for use with VUE CLI.
Now I did this:
List.vue

<template>
  <div class="container">
      <div class="row">
        <div class="col">
          <table class="table table-bordered table-hover table-striped table-xs-block">
            <caption>
              <div class="pull-right multiple-action">
                <div class="search">
                  <div class="input-group">
                    <input type="search" class="form-control" placeholder="Search by Name" v-model="search">
                    <span class="input-group-addon">
                      <i class="glyphicon glyphicon-search"></i>
                    </span>
                  </div>
                </div>
                <div class="dropdown filterbox" :class="{ 'open': filterToggle }">
                  <button type="button" class="btn btn-success" v-on:click="filterToggle = !filterToggle">
                    <i class="glyphicon glyphicon-filter"></i>
                  </button>
                  <ul class="dropdown-menu list-group">
                    <li class="list-group-item">
                      <label>Filter by Status</label>
                    </li>
                    <li class="list-group-item">
                      <input type="checkbox" value="actived">Actived
                    </li>
                    <li class="list-group-item">
                      <input type="checkbox" value="deactived">Deactived
                    </li>
                    <li class="list-group-item">
                      <input type="checkbox" value="created"> Created
                    </li>
                  </ul>
                </div>
                <button type="button" class="btn btn-primary">
                  <i class="glyphicon glyphicon-plus" v-on:click="openModal()"></i>
                </button>
              </div>
            </caption>
            <thead class="bg-primary">
              <tr>
                <th v-on:click="sortById = !sortById">ID</th>
                <th v-on:click="sortByName = !sortByName">Name</th>
                <th v-on:click="sortByLocation = !sortByLocation">Location</th>
                <th v-on:click="sortByCurrency = !sortByCurrency">Currency</th>
                <th> Action </th>
              </tr>
            </thead>
            <tr v-for="item in liveSearch ">
              <td v-text="item.id"></td>
              <td v-text="item.name"></td>
              <td v-text="item.location"></td>
              <td v-text="item.currency"></td>
              <td>
                <button type="button" class="btn btn-warning">
                  <i class="glyphicon glyphicon-edit" v-on:click="showModal=true"></i>
                </button>
                <button type="button" class="btn btn-danger">
                  <i class="glyphicon glyphicon-trash"></i>
                </button>
                <!--<button v-on:click="showModal=true" class="uk-button uk-button-primary">Show Modal</button>-->
              </td>
            </tr>
            <tr>
              <td colspan="4" style="float: right">
                <b style="float: right">Итого - {{ total }} у.е.</b>
              </td>
            </tr>
          </table>
          <modal v-if="showModal" v-on:close="showModal = false">
            <h3 slot="title">Item</h3>
            <div slot="body" >
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group">
                    <div class="input-group">
                      <span class="input-group-addon">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                      </span>
                      <input type="text" class="form-control">
                    </div>
                    <span class="help-block">Id is invalid!</span>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <div class="input-group">
                      <span class="input-group-addon">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                      </span>
                      <select class="form-control">
                        <option value="created">Created</option>
                        <option value="actived">Actived</option>
                        <option value="deactived">Deactived</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group" >
                <div class="input-group">
                  <span class="input-group-addon">
                    <i class="glyphicon glyphicon-user"></i>
                  </span>
                  <input type="text" class="form-control" placeholder="Fullname">
                </div>
                <span class="help-block" >Name is empty!</span>
              </div>
              <div class="form-group" >
                <div class="input-group">
                  <span class="input-group-addon">
                    <i class="glyphicon glyphicon-time"></i>
                  </span>
                  <input type="text" class="form-control" placeholder="Old">
                </div>
                <span class="help-block" >Old is empty!</span>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <span class="input-group-addon">
                    <i class="glyphicon glyphicon-envelope"></i>
                  </span>
                  <input type="text" class="form-control" placeholder="Email Address" >
                </div>
                <span class="help-block" >Email is empty!</span>
                <span class="help-block" >Email is invalid!</span>
              </div>
              <button type="button" class="btn btn-primary" v-on:click="submit(item)">Submit</button>
            </div>
            <!-- <div slot="footer" class="text-center"></div> -->
          </modal>
        </div>
      </div>
    </div>
</template>

<script>
  import test from '../static/test.json'
  import Modal from './Modal'
  export default {
    component:{Modal},
    name: "list",
    data() {
      return {
        showModal: false,
        filterToggle: false,
        data: test,
        search: '',
        sortedBy: '',
      }
    },
    computed: {
      total: function () {
        return this.liveSearch.reduce(function (sum, next) {
          return sum + next.currency;
        }, 0);
      },

      liveSearch: function () {
        return this.data.filter((item) => {
          return item.name.toLowerCase().match(this.search.toLocaleLowerCase()) ||
            item.id.match(this.search) ||
            item.location.match(this.search) ||
            item.currency.toString().match(this.search.toString())
        })
      },
      sortById: function (val) {
        this.data = this.sortBy(this.data, 'id', val);
      },
      sortByName: function (val) {
        this.data = this.sortBy(this.data, 'name', val);
      },
      sortByLocation: function (val) {
        this.data = this.sortBy(this.data, 'location', val);
      },
      sortByCurrency: function (val) {
        this.data = this.sortBy(this.data, 'currency', val);
      },
    },
    methods: {
      openModal: function () {
        this.showModal = true;
      },
      sortBy: function(array, param, reverse) {
        let filterA, filterB;
        return array.sort(function (a, b) {
          switch (param) {
            case 'id':
              filterA = a.id;
              filterB = b.id;
              break;
            case 'name':
              filterA = a.name;
              filterB = b.name;
              break;
            case 'location':
              filterA = a.location;
              filterB = b.location;
              break;
            case 'currency':
              filterA = Number(a.currency);
              filterB = Number(b.currency);
              break;
          }
          if (reverse) {
            return (filterA > filterB) ? 1 : -1;
          } else {
            return (filterA < filterB) ? 1 : -1;
          }
        });
      },

    }
  }
</script>

<style scoped>
 
</style>

modal.vue

<template>
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header bg-primary">
            <button type="button" class="close" v-on:click="$emit('close')"><span aria-hidden="true">&times;</span></button>
            <slot name="title">Modal Title</slot>
          </div>
          <div class="modal-body">
            <slot name="body"></slot>
          </div>
          <div class="modal-footer">
            <slot name="footer"></slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'modal',
    src: '',
    data() {
      return {
        // filterToggle: false,
      }
    },
    methods:{

    }
  }
</script>
<style scoped>

</style>

But it seems to me, or should the modal component that is described in list.vue be in modal.vue ?

Answer 1

There is a solution in the form of a ready-made library https://github.com/OneWayTech/vue2-datatable
Work example https://onewaytech.github.io/vue2-datatable/exampl...