refactor: decouple the app loading from the app main

src/app.js

@@ -4,6 +4,7 @@ import Footer from '@/fragments/footer/Footer'
 import Toaster from '@/fragments/toaster/Toaster'
 import Confirm from '@/fragments/dialogs/confirm/Confirm'
 import Info from '@/fragments/dialogs/info/Info'
+import MainMenu from '@/common/main-menu'
 
 export default {
   data () {
@@ -22,11 +23,22 @@ export default {
     appInfo: Info
   },
   created () {
+    // This is the first and main component rendered when the app
+    // is loaded. Therefore, as soon as it is created, we store
+    // a reference to the root Vue component in the store
+    // so that other component can easily access it
+    this.$store.commit('mainAppInstanceRef', this.$root)
+
+    // Register the listener for the showLoading and 
+    // titleChanged events
     this.eventBus.$on('showLoading', (value) => {
       this.showLoading = value
     })
     this.eventBus.$on('titleChanged', (title) => {
       this.title = title
     })
-  }
+  },
+  mounted() {
+    MainMenu.adjustMenu()  
+  },
 }

src/common/global-mixins.js

@@ -1,8 +1,12 @@
 import * as showToaster from './show-toaster-mixin'
 import main from '@/main'
 import appConstants from '@/resources/constants'
+import AppHooks from '@/support/app-hooks'
 
 const globalMixins = {
+  data: () => ({
+    appHooks: new AppHooks()
+  }),
   methods: {
     ...showToaster, // mix the show toaster methods here
 

src/common/main-menu.js

@@ -1,5 +1,6 @@
 import menuManager from '@/support/menu-manager'
 import appConfig from '@/config/app-config'
+import AppLoader from '@/app-loader'
 import store from '@/store/store'
 import main from '@/main'
 
@@ -32,7 +33,9 @@ const loadItems = () => {
 }
 
 const adjustMenu = () => {
-  main.getInstance().appHooks.run('modifyMenu', store.getters.mainMenu)
+  new AppLoader().loadApp().then((vueInstance => {
+    vueInstance.appHooks.run('modifyMenu', store.getters.mainMenu)
+  }))
 }
 
 /**

src/common/prepared-vue.js

@@ -0,0 +1,151 @@
+import DatePicker from '@/fragments/date-picker/DatePicker'
+import wrapperTag from '@/fragments/wrapper/wrapper-tag'
+import clickOutside from '@/directives/click-outside'
+import smartTooltip from '@/directives/smart-tooltip'
+import globalMixins from '@/common/global-mixins'
+import AppVMenu from '@/fragments/v-menu/VMenu'
+import topBorder from '@/directives/top-border'
+import capitalize from '@/filters/capitalize'
+import HMenu from '@/fragments/h-menu/HMenu'
+import uppercase from '@/filters/uppercase'
+import title from '@/directives/title'
+import focus from '@/directives/focus'
+import VeeValidate from 'vee-validate'
+import box from '@/fragments/box/Box'
+import theme from '@/config/theme'
+import VueLodash from 'vue-lodash'
+import VueMoment from 'vue-moment'
+import bg from '@/directives/bg'
+import lodash from 'lodash'
+import Vue from 'vue'
+
+
+import '../../node_modules/vuetify/src/stylus/app.styl'
+
+import {
+  Vuetify,
+  VApp,
+  VNavigationDrawer,
+  VFooter,
+  VList,
+  VBtn,
+  VMenu,
+  VIcon,
+  VGrid,
+  VToolbar,
+  transitions,
+  VDivider,
+  VExpansionPanel,
+  VSubheader,
+  VForm,
+  VTextField,
+  VTextarea,
+  VDialog,
+  VCard,
+  VJumbotron,
+  VSnackbar,
+  VSelect,
+  VCheckbox,
+  VTabs,
+  VDataTable,
+  VProgressLinear,
+  VDatePicker,
+  VChip,
+  VSwitch,
+  VAlert,
+  VImg,
+  VBtnToggle,
+  VTooltip,
+  VAutocomplete,
+  VSlider,
+  VBadge,
+  VBottomNav,
+  VCarousel,
+  VItemGroup
+} from 'vuetify'
+
+Vue.use(Vuetify, {
+  theme: theme,
+  components: {
+    VApp,
+    VNavigationDrawer,
+    VFooter,
+    VList,
+    VBtn,
+    VMenu,
+    VIcon,
+    VGrid,
+    VToolbar,
+    transitions,
+    VDivider,
+    VExpansionPanel,
+    VSubheader,
+    VForm,
+    VTextField,
+    VTextarea,
+    VDialog,
+    VCard,
+    VJumbotron,
+    VSnackbar,
+    VSelect,
+    VCheckbox,
+    VTabs,
+    VDataTable,
+    VProgressLinear,
+    VDatePicker,
+    VChip,
+    VSwitch,
+    VAlert,
+    VImg,
+    VBtnToggle,
+    VTooltip,
+    VAutocomplete,
+    VSlider,
+    VBadge,
+    VBottomNav,
+    VCarousel,
+    VItemGroup
+  }
+})
+
+const options = { lodash: lodash } // customize the way you want to call it
+Vue.use(VueLodash, options) // options is optional
+
+// Use vee validate to easily validate forms
+Vue.use(VeeValidate)
+
+// Managing Date and Times
+Vue.use(VueMoment)
+
+// Create a global event bus, so all the components
+// can access it to emit and capture events using this.eventBus
+const eventBus = new Vue()
+Vue.prototype.eventBus = eventBus
+
+// turn off console message saying we are in dev mode
+Vue.config.productionTip = false
+
+// Add global mixins to vue instance
+Vue.mixin(globalMixins)
+
+// add global custom directives
+Vue.directive('top-border', topBorder)
+Vue.directive('bg', bg)
+Vue.directive('title', title)
+Vue.directive('click-outside', clickOutside)
+Vue.directive('focus', focus)
+Vue.directive('smart-tooltip', smartTooltip)
+
+
+// add global custom components
+Vue.component('box', box)
+Vue.component('app-h-menu', HMenu)
+Vue.component('app-v-menu', AppVMenu)
+Vue.component('date-picker', DatePicker)
+Vue.component('wrapper-tag', wrapperTag)
+
+// add global custom filters
+Vue.filter('uppercase', uppercase)
+Vue.filter('capitalize', capitalize)
+
+export default Vue

src/directives/focus.js

@@ -1,4 +1,4 @@
-import Vue from '@/common/vue-with-vuetify.js'
+import PreparedVue from '@/common/prepared-vue.js'
 const focus = {
   inserted: (el, binding) => {
     focus.processFocus(el, binding)
@@ -8,7 +8,7 @@ const focus = {
   },
   processFocus: (el, binding) => {
     if (binding.value) {
-      let VueRoot = Vue
+      let VueRoot = PreparedVue
       VueRoot.nextTick(() => {
         setTimeout(() => {
           let inputs = el.getElementsByTagName('input')