Daib PR: Load the config dynamicly

src/UIOMatic.SPA/src/App.vue

@@ -1,90 +1,24 @@
+
 <template>
   <div id="app">
-    <nav class="nav-wrap">
-      <div class="nav container">
-        <RouterLink to="/" class="logo">{{ name }}</RouterLink>
-        <ul>
-          <li v-for="contentType in contentTypes" :key="contentType.name">
-            <RouterLink :to="`/${contentType.name}/list`">{{ contentType.label }}</RouterLink>
-          </li>
-        </ul>
-      </div>
-    </nav>
-    <main class="main container">
-      <RouterView :key="this.$route.path"/>
-    </main>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import config from "./config";
-
-
-
 export default {
-  name: "App",
-  created() {
-    this.name = config.name;
-    this.contentTypes = config.contentTypes;
-  }
-};
+  name: 'App',
+}
 </script>
 
 <style>
-body {
-  margin: 0;
-  padding: 0;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
 #app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-align: center;
   color: #2c3e50;
-}
-
-.nav-wrap {
-  padding-top: 1em;
-  padding-bottom: 1em;
-  border-bottom: 1px solid #ccc;
-}
-
-.nav {
-  display: flex;
-  justify-content: space-between;
-}
-
-.nav ul {
-  display: flex;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-.nav li:not(:first-child) {
-  margin-left: 0.5em;
-}
-
-.nav li:not(:first-child)::before {
-  content: "|";
-  margin-right: 0.5em;
-}
-
-.main {
-  margin-top: 2em;
-}
-
-.container {
-  max-width: 42em;
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: 1em;
-  padding-left: 1em;
+  margin-top: 60px;
 }
 </style>
+

src/UIOMatic.SPA/src/main.js

@@ -1,47 +1,20 @@
-import Vue from "vue";
 
-import config from "./config";
-import makeCrudModule from "./store/crud";
-import makeCrudRoutes from "./router/crud";
-import makeService from "./services/api";
-import router from "./router";
-import store from "./store";
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import axios from 'axios'
 
-import App from "./App.vue";
-import FormContainer from "./components/FormContainer.vue";
-import ListingContainer from "./components/ListingContainer.vue";
+Vue.config.productionTip = false
 
-Vue.config.productionTip = false;
-var contentTypes;
-var response = fetch(`https://localhost:7170/UIOMatic/GetAll`)
-    .then(response => contentTypes = response.json());
+// Load config from REST API
+axios.get('https://api.example.com/config')
+  .then(({ data: config }) => {
+    // Set global config
+    Vue.prototype.$config = config
 
+    new Vue({
+      router,
+      render: h => h(App)
+    }).$mount('#app')
+  })
 
-
-config.contentTypes.forEach(contentType => {
-  // Register dynamically generated store modules.
-  store.registerModule(
-    contentType.name,
-    makeCrudModule({
-        service: makeService(contentType)
-    })
-  );
-
-  // Register dynamically generated routes.
-  router.addRoutes(
-    makeCrudRoutes({
-      components: {
-        FormContainer,
-        ListingContainer
-      },
-      contentType
-    })
-  );
-});
-
-new Vue({
-  render: h => h(App),
-  router,
-  store,
-
-}).$mount("#app");

src/UIOMatic.SPA/src/router/index.js

@@ -1,15 +1,23 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
 
-import Welcome from "../components/Welcome.vue";
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
 
-Vue.use(VueRouter);
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router
 
-export default new VueRouter({
-  routes: [
-    {
-      path: "/",
-      component: Welcome
-    }
-  ]
-});

src/UIOMatic.SPA/src/views/Home.vue

@@ -0,0 +1,24 @@
+
+<template>
+  <div>
+    <h1>{{ $config.title }}</h1>
+    <p>{{ $config.description }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Home',
+}
+</script>
+
+<style scoped>
+h1 {
+  color: #2c3e50;
+}
+
+p {
+  font-size: 14px;
+  color: #777;
+}
+</style>