SSR Switch

resources/js/app.js

@@ -1,13 +1,19 @@
 require('./bootstrap');
 
 import Vue from 'vue';
-import VueRouter from 'vue-router';
-import routes from './routes';
+import TodaysPick from "./components/TodaysPick";
+import DiscoverTopics from "./components/DiscoverTopics";
+import RecentStories from "./components/RecentStories";
+import AvailableSources from './components/AvailableSources';
 
 Vue.use(require('vue-moment'));
-Vue.use(VueRouter);
 
 const app = new Vue({
     el: '#app',
-    router: new VueRouter(routes)
+    components: {
+        TodaysPick,
+        DiscoverTopics,
+        RecentStories,
+        AvailableSources
+    }
 });

resources/js/components/DiscoverTopics.vue

@@ -7,14 +7,14 @@
         </div>
 
         <div class="flex flex-wrap justify-center">
-            <router-link
-                :to="{ name: 'topic.show', params: { slug: topic.slug } }"
+            <a
+                href=""
                 v-for="topic in topics"
                 :key="topic.id"
                 class="text-sm font-medium border border-gray-700 py-1 px-3 rounded-full mr-2 mt-2 mb-4 hover:bg-green-100 MvTyper"
                 style="color:#4A5568;"
                 v-text="topic.name"
-            ></router-link>
+            ></a>
         </div>
     </div>
 </template>

resources/js/components/RecentStories.vue

@@ -12,8 +12,8 @@
             <!-- post cards -->
             <div class="w-full lg:w-2/3">
                 <div v-for="story in recentStories" :key="story.id">
-                    <router-link
-                        :to="{ name: 'article.show', params: { id: story.id } }"
+                    <a
+                        href=""
                         class="block w-full lg:flex mb-10 shadow rounded-lg"
                     >
                         <div
@@ -59,7 +59,7 @@
                             }"
                             :title="story.meta.title"
                         ></div>
-                    </router-link>
+                    </a>
                 </div>
             </div>
         </div>

resources/js/components/TodaysPick.vue

@@ -15,11 +15,8 @@
             <!-- sub-main posts -->
             <div class="md:w-4/7">
                 <div v-for="subarticle in subarticles" :key="subarticle.id">
-                    <router-link
-                        :to="{
-                            name: 'article.show',
-                            params: { id: subarticle.id }
-                        }"
+                    <a
+                        href=""
                         class="rounded w-full flex flex-col md:flex-row mb-10"
                     >
                         <div class="bg-white rounded px-4">
@@ -85,7 +82,7 @@
                             :src="subarticle.featured_image"
                             class="block md:hidden lg:block rounded-md h-64 md:h-32 m-4 md:m-0"
                         />
-                    </router-link>
+                    </a>
                 </div>
             </div>
 
@@ -94,24 +91,24 @@
                 class="mb-4 lg:mb-0 p-4 lg:p-0 w-full md:w-4/7 relative rounded block"
                 v-if="article"
             >
-                <router-link
-                    :to="{ name: 'article.show', params: { id: article.id } }"
+                <a
+                    href="#"
                 >
                     <img
                         :src="article.featured_image"
                         class="rounded-md object-cover w-full h-3/4"
                     />
-                </router-link>
+                </a>
 
-                <router-link
-                    :to="{ name: 'article.show', params: { id: article.id } }"
+                <a
+                    href="#"
                 >
                     <h1
                         class="text-gray-800 text-3xl font-bold mt-2 mb-2 leading-tigh hover:underline text-right MvTyper"
                         style="direction:rtl;"
                         v-text="article.title"
                     ></h1>
-                </router-link>
+                </a>
 
                 <div class="flex justify-end items-center">
                     <div>

resources/js/pages/Home.vue

@@ -1,23 +0,0 @@
-<template>
-    <div>
-        <todays-pick></todays-pick>
-        <discover-topics></discover-topics>
-        <available-sources></available-sources>
-        <recent-stories></recent-stories>
-
-    </div>
-</template>
-<script>
-import TodaysPick from "../components/TodaysPick";
-import DiscoverTopics from "../components/DiscoverTopics";
-import RecentStories from "../components/RecentStories";
-import AvailableSources from '../components/AvailableSources';
-export default {
-    components: {
-        TodaysPick,
-        DiscoverTopics,
-        RecentStories,
-        AvailableSources
-    }
-};
-</script>

resources/js/routes.js

@@ -1,24 +0,0 @@
-import Home from './pages/Home';
-import Article from './pages/Article';
-import Topic from './pages/Topic';
-
-export default {
-    mode: 'history',
-
-
-    routes: [{
-            path: '/',
-            component: Home
-        },
-        {
-            path: '/article/:id',
-            component: Article,
-            name: 'article.show'
-        },
-        {
-            path: '/topic/:slug',
-            component: Topic,
-            name : 'topic.show'
-        }
-    ]
-};