Customize a loading instruction

loading.vue Components

<template>
  <div class="loading-wrapper">
    <div class="loading-content">
      <p class="title">{
    {
     title }}</p>
    </div>
  </div>
</template>
<script>
export default {
    
  data() {
    
    return {
     title: ' Loading ...' };
  }
};
</script>
<style lang="less" scoped>
.loading-wrapper {
    
  // width: 100%;
  // height: 100%;
  // background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  .loading-content {
    
    width: 100%;
    text-align: center;
    .title {
    
      line-height: 20px;
      font-size: 12px;
      margin: 0;
    }
  }
}
</style>

loading.js Instruction core code

import Vue from 'vue';
import MyLoading from './loading.vue';

const myLoading = {
    
  inserted(el, binding) {
    
    console.log(' Custom instruction ', el, binding);
    const Loading = Vue.extend(MyLoading);
    const loading = new Loading().$mount();
    console.log('loading', loading);
    el.instance = loading;
    if (binding.value) {
    
      append(el);
    }
  },
  update(el, binding) {
    
    if (binding.value !== binding.oldValue) {
    
      binding.value ? append(el) : remove(el);
    }
  }
};
function append(el) {
    
  console.log(' Custom instruction el', el.instance.$el);
  el.appendChild(el.instance.$el);
}
function remove(el) {
    
  el.removeChild(el.instance.$el);
}

export default myLoading;

main.js To register Registration instructions

import myLoading from './view/contact/components/loading.js';
Vue.directive('myLoading', myLoading);