add debug component and global components import

src/components/globals/ComponentDebug.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="border p-3">
+    <span class="font-weight-bold">{{ component.$options.name }}</span>
+    PROPS: {{ component.$props }}
+    <slot name="default" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ComponentDebug',
+
+  props: {
+    component: { type: Object, required: true }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/main.js

@@ -8,10 +8,24 @@ import store from './store'
 import App from './App'
 
 
-Vue.use(BootstrapVue)
+Vue.use(BootstrapVue, {
+  BButton: { pill: true }
+})
 Vue.use(Meta)
 Vue.use(Vue2TouchEvents)
 
+
+// Register global components
+const requireComponent = require.context('@/components/globals', true, /\.(js|vue)$/i)
+// For each matching file name...
+requireComponent.keys().forEach((fileName) => {
+  // Get the component
+  const component = requireComponent(fileName).default
+  // Globally register the component
+  Vue.component(component.name, component)
+})
+
+
 new Vue({
   router,
   store,