wip

src/App.vue

@@ -1,19 +1,25 @@
 <template>
-    <div class="min-h-screen bg-white font-roboto" id="app">
+    <div class="bg-white font-roboto" id="app">
         <Header></Header>
 
-        <main-component></main-component>
+        <div class="container mx-auto px-6" id="main">
+            <div class="py-16 text-center">
+                <h1 class="text-xl md:text-3xl text-gray-800 font-medium">Discover new components. Build amazing things 🔥</h1>
+            </div>
+
+            <router-view></router-view>
+        </div>
     </div>
 </template>
 
 <script>
 import Header from "./components/Header";
-import MainComponent from "./components/Main";
 
 export default {
     components: {
-        Header, MainComponent
+        Header
     },
+    
     mounted() {
         this.$ga.page('/');
     }

src/Models/Filter.js

@@ -1,26 +0,0 @@
-import categories from "./components";
-
-export default class Filter {
-
-    constructor() {
-        this.categories = categories;
-    }
-
-    all() {
-        return this.categories;
-    }
-
-    whereCategory(category) {
-
-        if(this.isEmpty(category)) return this.categories;
-
-        let pattern = new RegExp(`^${category}`, 'i');
-
-        return this.categories.filter(category => category.name.match(pattern));
-    }
-
-    isEmpty(string) {
-        return string.length === 0;
-    }
-
-}

src/Models/components.js

@@ -1,75 +0,0 @@
-export default [
-    {
-        name: 'Alert',
-        components: [
-            { name: 'Success pop' },
-            { name: 'Info pop' },
-            { name: 'Warning pop' },
-            { name: 'Error pop' },
-            { name: 'Notification pop' },
-            { name: 'Success full width' },
-            { name: 'Info full width' },
-            { name: 'Warning full width' },
-            { name: 'Error full width' },
-
-        ],
-    },
-    {
-        name: 'Cards',
-        components: [
-            { name: 'Article card' },
-            { name: 'Article card with image' },
-            { name: 'Simple product card' },
-            { name: 'Product card' },
-            { name: 'Product card with evaluation' },
-            { name: 'Testimonial card' },
-            { name: 'User card' },
-            { name: 'User card with details' },
-        ],
-    },
-    {
-        name: 'Forms',
-        components: [
-            {name: 'Inputs Form'},
-            {name: 'Newsletter form'},
-            {name: 'Sign in form'},
-            {name: 'Sign in form with image'},
-        ],
-    },
-    {
-        name: 'Navbars',
-        components: [
-            { name: 'Navbar' },
-            { name: 'Navbar with search' },
-            { name: 'Navbar with avatar' },
-        ]
-    },
-    {
-        name: 'Headers',
-        components: [
-            { name: 'Header with image' },
-            { name: 'Header with pattern' },
-        ],
-    },
-    {
-        name: 'Sections',
-        components: [
-            { name: 'About me' },
-            { name: 'Cards list' },
-            { name: 'Paragraph with image' },
-        ]
-    },
-    {
-        name: 'Paginations',
-        components: [
-            { name: 'Pagination' },
-        ]
-    },
-    {
-        name: 'Footers',
-        components: [
-            { name: 'Simple Footer' },
-            { name: 'Footer with subscribe form' },
-        ]
-    },
-];

src/components/categories/Alerts.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        test
+    </div>
+</template>

src/main.js

@@ -11,15 +11,6 @@ Vue.config.productionTip = false;
 
 Vue.use(VueClipboard);
 
-Vue.use(VueAnalytics, {
-  id: 'UA-167213766-1'
-});
+Vue.use(VueAnalytics, { id: 'UA-167213766-1' });
 
-Vue.filter('toId', (componentName) => {
-  return componentName.toLowerCase().replace(/ /g, '-')
-});
-
-new Vue({
-  render: h => h(App),
-  router
-}).$mount('#app');
+new Vue({ render: h => h(App), router }).$mount('#app');

src/router.js

@@ -0,0 +1,15 @@
+import VueRouter from "vue-router";
+
+const Alerts = () =>
+  import("./components/categories/Alerts");
+
+
+  export default new VueRouter({
+    routes: [
+      {
+        path: "/alerts",
+        component: Alerts,
+        name: "Alerts",
+      },
+    ],
+  });