Improving templates

Author: David-Desmaisons

Diff for: example/App.vue

@@ -132,7 +132,6 @@ const components = requireContext.keys().reduce((acc, key) => {
 }, {});
 
 const showAll = process.env.VUE_APP_SHOW_ALL_EXAMPLES === "true";
-window.console.log(process.env.VUE_APP_SHOW_ALL_EXAMPLES);
 if (showAll) {
   const order = Object.keys(components);
   const requireContextDebug = require.context(

Diff for: example/components/headerslot.vue

@@ -18,15 +18,17 @@
           {{ element.name }}
         </div>
 
-        <div
-          slot="header"
-          class="btn-group list-group-item"
-          role="group"
-          aria-label="Basic example"
-        >
-          <button class="btn btn-secondary" @click="add">Add</button>
-          <button class="btn btn-secondary" @click="replace">Replace</button>
-        </div>
+        <template v-slot:header>
+          <div
+            class="btn-group list-group-item"
+            role="group"
+            aria-label="Basic example"
+          >
+            <button class="btn btn-secondary" @click="add">Add</button>
+            <button class="btn btn-secondary" @click="replace">Replace</button>
+          </div>
+        </template>
+
       </draggable>
     </div>
 
@@ -42,26 +44,26 @@ export default {
   display: "Header slot",
   order: 13,
   components: {
-    draggable
+    draggable,
   },
   data() {
     return {
       list: [
         { name: "John 1", id: 0 },
         { name: "Joao 2", id: 1 },
-        { name: "Jean 3", id: 2 }
+        { name: "Jean 3", id: 2 },
       ],
-      dragging: false
+      dragging: false,
     };
   },
   methods: {
-    add: function() {
+    add: function () {
       this.list.push({ name: "Juan " + id, id: id++ });
     },
-    replace: function() {
+    replace: function () {
       this.list = [{ name: "Edgard", id: id++ }];
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped></style>

Diff for: example/components/two-list-headerslots.vue

@@ -19,15 +19,16 @@
           {{ element.name }}
         </div>
 
-        <div
-          slot="footer"
-          class="btn-group list-group-item"
-          role="group"
-          aria-label="Basic example"
-        >
-          <button class="btn btn-secondary" @click="add">Add</button>
-          <button class="btn btn-secondary" @click="replace">Replace</button>
-        </div>
+        <template v-slot:footer>
+          <div
+            class="btn-group list-group-item"
+            role="group"
+            aria-label="Basic example"
+          >
+            <button class="btn btn-secondary" @click="add">Add</button>
+            <button class="btn btn-secondary" @click="replace">Replace</button>
+          </div>
+        </template>
       </draggable>
     </div>
 
@@ -43,15 +44,16 @@
           {{ element.name }}
         </div>
 
-        <div
-          slot="footer"
-          class="btn-group list-group-item"
-          role="group"
-          aria-label="Basic example"
-        >
-          <button class="btn btn-secondary" @click="add2">Add</button>
-          <button class="btn btn-secondary" @click="replace2">Replace</button>
-        </div>
+        <template v-slot:footer>
+          <div
+            class="btn-group list-group-item"
+            role="group"
+            aria-label="Basic example"
+          >
+            <button class="btn btn-secondary" @click="add2">Add</button>
+            <button class="btn btn-secondary" @click="replace2">Replace</button>
+          </div>
+        </template>
       </draggable>
     </div>
 
@@ -78,7 +80,10 @@ export default {
         { name: "Joao 2", id: 1 },
         { name: "Jean 3", id: 2 }
       ],
-      list2: [{ name: "Jonny 4", id: 3 }, { name: "Guisepe 5", id: 4 }]
+      list2: [
+        { name: "Jonny 4", id: 3 },
+        { name: "Guisepe 5", id: 4 }
+      ]
     };
   },
   methods: {

Diff for: example/main.js

@@ -19,4 +19,4 @@ const app = createApp(App);
 app.use(store);
 app.use(router);
 app.component("rawDisplayer", rawDisplayer);
-app.mount("#app");
+router.isReady().then(() => app.mount('#app'));

Diff for: example/route.js

@@ -1,11 +1,27 @@
-const ctx = require.context("./components/", false, /\.vue$/);
+function getRouteFromDirectory(ctx) {
+  return ctx.keys().map(key => ({
+    path: key.substring(1).replace(".vue", ""),
+    component: ctx(key).default,
+  }));
+}
+
+const showAll = process.env.VUE_APP_SHOW_ALL_EXAMPLES === "true";
+window.console.log(process.env.VUE_APP_SHOW_ALL_EXAMPLES);
+
+const routes = [
+  ...getRouteFromDirectory(require.context("./components/", false, /\.vue$/)),
+  ...(!showAll
+    ? []
+    : getRouteFromDirectory(
+        require.context("./debug-components/", false, /\.vue$/)
+      )),
+  {
+    path: "/",
+    redirect: "/simple",
+  },
+];
+
+window.console.log(routes);
 
-const routes = ctx.keys().map(key => ({
-  path: key.substring(1).replace(".vue", "")
-}));
 
-routes.push({
-  path: "/",
-  redirect: "/simple"
-});
 export default routes;