Remove vue router files

package.json

@@ -11,15 +11,13 @@
     "autoprefixer": "^9.7.6",
     "core-js": "^3.6.4",
     "highlight.js": "^10.0.2",
-    "js-beautify": "^1.11.0",
     "postcss-import": "^12.0.1",
     "tailwindcss": "^1.4.4",
     "vue": "^2.6.11",
     "vue-analytics": "^5.22.1",
     "vue-backtotop": "^1.6.1",
     "vue-clipboard2": "^0.3.1",
-    "vue-meta": "^2.4.0",
+    "vue-meta": "^2.4.0"
-    "vue-router": "^3.3.2"
   },
   "devDependencies": {
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",

src/App.vue

@@ -10,7 +10,7 @@
             </div>
 
             <div class="max-w-2xl mx-auto mt-4">
-                <div class="flex flex-wrap items-center justify-center">
+                <!-- <div class="flex flex-wrap items-center justify-center">
                     <span class="ml-2" v-for="route in routes" :key="route.path">
                         <span v-if="route.path != '/'">
                             <router-link class="inline-block mt-2 px-3 py-1 rounded text-sm cursor-pointer hover:bg-gray-700 hover:text-gray-200" :class="currentPage == route.path ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'" :to="route.path">
@@ -18,7 +18,7 @@
                             </router-link>
                         </span>
                     </span>
-                </div>
+                </div> -->
 
                 <p class="mt-8 text-gray-700 text-center">
                     Heros components require simple <span class="font-semibold">- don't panic please 😎 -</span>
@@ -27,7 +27,7 @@
             </div>
 
             <div class="mt-16">
-                <router-view></router-view>
+                <error-full-width></error-full-width>
             </div>
         </main>
 
@@ -45,21 +45,18 @@
 import MainHeader from "./components/Header";
 import BackToTop from "vue-backtotop";
 
+import ErrorFullWidth from "./components/ui/Alerts/ErrorFullWidth";
+
 export default {
     components: {
         MainHeader,
         BackToTop,
-    },
 
-    computed: {
+        ErrorFullWidth
-        currentPage() {
-            return this.$route.path;
-        },
     },
 
     data() {
         return {
-            routes: this.$router.options.routes,
             og: "https://merakiui.com" + require("./assets/merakiui-og.png"),
         };
     },
@@ -67,7 +64,6 @@ export default {
     metaInfo() {
         return {
             meta: [
-              // Twitter Card
                 { name: "twitter:card", content: "summary_large_image" },
                 { name: "twitter:title", content: "Meraki UI Tailwindcss Components" },
                 {
@@ -75,9 +71,7 @@ export default {
                   content:
                     "Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
                 },
-                // image must be an absolute path
                 { name: "twitter:image", content: this.og },
-                // Facebook OpenGraph
                 { property: "og:title", content: "Meraki UI Tailwindcss Components" },
                 { property: "og:site_name", content: "Meraki UI" },
                 { property: "og:type", content: "website" },

src/components/categories/Alerts.vue

@@ -1,41 +0,0 @@
-<template>
-    <div class="w-full max-w-5xl mx-auto my-10">
-        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Alerts</h1>
-
-        <success-pop></success-pop>
-        <info-pop></info-pop>
-        <warning-pop></warning-pop>
-        <error-pop></error-pop>
-        <notification-pop></notification-pop>
-        <success-full-width></success-full-width>
-        <info-full-width></info-full-width>
-        <warning-full-width></warning-full-width>
-        <error-full-width></error-full-width>
-    </div>
-</template>
-
-<script>
-import SuccessPop from "../ui/Alerts/SuccessPop";
-import InfoPop from "../ui/Alerts/InfoPop";
-import WarningPop from "../ui/Alerts/WarningPop";
-import ErrorPop from "../ui/Alerts/ErrorPop";
-import NotificationPop from "../ui/Alerts/NotificationPop";
-import SuccessFullWidth from "../ui/Alerts/SuccessFullWidth";
-import InfoFullWidth from "../ui/Alerts/InfoFullWidth";
-import WarningFullWidth from "../ui/Alerts/WarningFullWidth";
-import ErrorFullWidth from "../ui/Alerts/ErrorFullWidth";
-
-export default {
-    components: { 
-        SuccessPop , 
-        InfoPop , 
-        WarningPop,
-        ErrorPop,
-        NotificationPop,
-        SuccessFullWidth,
-        InfoFullWidth,
-        WarningFullWidth,
-        ErrorFullWidth,
-    },
-};
-</script>

src/components/categories/Cards.vue

@@ -1,41 +0,0 @@
-<template>
-    <div class="w-full max-w-5xl mx-auto my-10">
-        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Cards</h1>
-
-        <Article></Article>
-        <article-with-s-m-icons></article-with-s-m-icons>
-        <article-with-image></article-with-image>
-        <product></product>
-        <product-with-evaluation></product-with-evaluation>
-        <simple-product></simple-product>
-        <testimonial></testimonial>
-        <user></user>
-        <user-with-details></user-with-details>
-    </div>
-</template>
-
-<script>
-import Article from "../ui/Cards/Article";
-import ArticleWithImage from "../ui/Cards/ArticleWithImage";
-import ArticleWithSMIcons from "../ui/Cards/ArticleWithSMIcons";
-import Product from "../ui/Cards/Product";
-import ProductWithEvaluation from "../ui/Cards/ProductWithEvaluation";
-import SimpleProduct from "../ui/Cards/SimpleProduct";
-import Testimonial from "../ui/Cards/Testimonial";
-import User from "../ui/Cards/User";
-import UserWithDetails from "../ui/Cards/UserWithDetails";
-
-export default {
-    components: { 
-        Article,
-        ArticleWithImage,
-        ArticleWithSMIcons,
-        Product,
-        ProductWithEvaluation,
-        SimpleProduct,
-        Testimonial,
-        User,
-        UserWithDetails
-    },
-};
-</script>

src/components/categories/Footers.vue

@@ -1,23 +0,0 @@
-<template>
-    <div class="w-full max-w-5xl mx-auto my-10">
-        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Footers</h1>
-
-        <simple></simple>
-        <with-details></with-details>
-        <with-subscribe-form></with-subscribe-form>
-    </div>
-</template>
-
-<script>
-import Simple from "../ui/Footers/Simple";
-import WithDetails from "../ui/Footers/WithDetails";
-import WithSubscribeForm from "../ui/Footers/WithSubscribeForm";
-
-export default {
-    components: { 
-        Simple,
-        WithDetails,
-        WithSubscribeForm,
-    },
-};
-</script>

src/components/categories/Forms.vue

@@ -1,20 +0,0 @@
-<template>
-    <div class="w-full max-w-5xl mx-auto my-10">
-        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Forms</h1>
-
-        <simple></simple>
-        <newsletter></newsletter>
-    </div>
-</template>
-
-<script>
-import Simple from "../ui/Forms/Simple";
-import Newsletter from "../ui/Forms/Newsletter";
-
-export default {
-    components: { 
-        Simple,
-        Newsletter,
-    },
-};
-</script>

src/components/categories/Heros.vue

@@ -1,23 +0,0 @@
-<template>
-    <div class="w-full max-w-5xl mx-auto my-10">        
-        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Heros</h1>
-
-        <e-commerce></e-commerce>
-        <with-image></with-image>
-        <with-pattern></with-pattern>
-    </div>
-</template>
-
-<script>
-import ECommerce from "../ui/Heros/ECommerce";
-import WithImage from "../ui/Heros/WithImage";
-import WithPattern from "../ui/Heros/WithPattern";
-
-export default {
-    components: { 
-        ECommerce,
-        WithImage,
-        WithPattern,
-    },
-};
-</script>

src/components/categories/Navbars.vue

@@ -1,23 +0,0 @@
-<template>
-    <div class="w-full max-w-5xl mx-auto my-10">
-        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Navbars</h1>
-
-        <e-commerce></e-commerce>
-        <with-search></with-search>
-        <with-avatar-and-alert-icon></with-avatar-and-alert-icon>
-    </div>
-</template>
-
-<script>
-import ECommerce from "../ui/Navbars/ECommerce";
-import WithSearch from "../ui/Navbars/WithSearch";
-import WithAvatarAndAlertIcon from "../ui/Navbars/WithAvatarAndAlertIcon";
-
-export default {
-    components: { 
-        ECommerce,
-        WithSearch,
-        WithAvatarAndAlertIcon,
-    },
-};
-</script>

src/components/categories/Paginations.vue

@@ -1,17 +0,0 @@
-<template>
-    <div class="w-full max-w-5xl mx-auto my-10">
-        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Paginations</h1>
-
-        <simple></simple>
-    </div>
-</template>
-
-<script>
-import Simple from "../ui/Paginations/Simple";
-
-export default {
-    components: { 
-        Simple,
-    },
-};
-</script>

src/components/categories/Sections.vue

@@ -1,26 +0,0 @@
-<template>
-    <div class="w-full max-w-5xl mx-auto my-10">
-        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Sections</h1>
-
-        <about-me></about-me>
-        <feature></feature>
-        <our-team></our-team>
-        <paragraph-with-image></paragraph-with-image>
-    </div>
-</template>
-
-<script>
-import AboutMe from "../ui/Sections/AboutMe";
-import Feature from "../ui/Sections/Feature";
-import OurTeam from "../ui/Sections/OurTeam";
-import ParagraphWithImage from "../ui/Sections/ParagraphWithImage";
-
-export default {
-    components: { 
-        AboutMe,
-        Feature,
-        OurTeam,
-        ParagraphWithImage,
-    },
-};
-</script>

src/components/categories/Sign-inAndRegistration.vue

@@ -1,20 +0,0 @@
-<template>
-    <div class="w-full max-w-5xl mx-auto my-10">
-        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Sign-in and Registration</h1>
-
-        <simple-card></simple-card>
-        <with-side-image></with-side-image>
-    </div>
-</template>
-
-<script>
-import SimpleCard from "../ui/Sign-inAndRegistration/SimpleCard";
-import WithSideImage from "../ui/Sign-inAndRegistration/WithSideImage";
-
-export default {
-    components: { 
-        SimpleCard,
-        WithSideImage
-    },
-};
-</script>

src/main.js

@@ -1,7 +1,5 @@
 import Vue from "vue";
-import VueRouter from "vue-router";
 import App from "./App.vue";
-import router from "./router";
 import Meta from "vue-meta";
 import VueClipboard from "vue-clipboard2";
 import VueAnalytics from "vue-analytics";
@@ -9,8 +7,6 @@ import ViewComponent from "./components/utilities/ViewComponent";
 
 Vue.use(Meta);
 
-Vue.use(VueRouter);
-
 Vue.component("view-component", ViewComponent);
 
 Vue.config.productionTip = false;
@@ -21,4 +17,4 @@ Vue.use(VueAnalytics, { id: "UA-167213766-1" });
 
 console.log("Hello 😎, If you like it star it on Github 🚀");
 
-new Vue({ render: (h) => h(App), router }).$mount("#app");
+new Vue({ render: (h) => h(App) }).$mount("#app");

src/router.js

@@ -1,32 +0,0 @@
-import VueRouter from "vue-router";
-
-const Alerts = () => import("./components/categories/Alerts");
-const Cards = () => import("./components/categories/Cards");
-const Forms = () => import("./components/categories/Forms");
-const Navbars = () => import("./components/categories/Navbars");
-const Heros = () => import("./components/categories/Heros");
-const Sections = () => import("./components/categories/Sections");
-const SignInAndRegistration = () =>
-    import("./components/categories/Sign-inAndRegistration");
-const Paginations = () => import("./components/categories/Paginations");
-const Footers = () => import("./components/categories/Footers");
-
-export default new VueRouter({
-    mode: "history",
-    routes: [
-        { path: "/", redirect: "/alerts" },
-        { path: "/alerts", component: Alerts, name: "Alerts" },
-        { path: "/cards", component: Cards, name: "Cards" },
-        { path: "/forms", component: Forms, name: "Forms" },
-        { path: "/navbars", component: Navbars, name: "Navbars" },
-        { path: "/heros", component: Heros, name: "Heros" },
-        { path: "/sections", component: Sections, name: "Sections" },
-        {
-            path: "/sign-in-and-registration",
-            component: SignInAndRegistration,
-            name: "Sign-in and Registration",
-        },
-        { path: "/paginations", component: Paginations, name: "Paginations" },
-        { path: "/footers", component: Footers, name: "Footers" },
-    ],
-});