feat: switching from auto-route to manual route definitions

src/components/pages/HomePage.vue

@@ -24,7 +24,7 @@ import HomeSectionWrapper from '@/components/molecules/HomeSectionWrapper.vue'
 import '@/assets/style.scss'
 import 'bulma/css/bulma.css'
 import { useI18n } from 'vue-i18n'
-import type { MessageSchema } from '../i18n/types'
+import type { MessageSchema } from '@/i18n/types'
 import { computed } from 'vue'
 
 const { tm } = useI18n()
@@ -35,7 +35,7 @@ const sectionsWithImages = computed(() =>
 
     return {
       ...section,
-      image: new URL(`../assets/${section.image}`, import.meta.url).href
+      image: new URL(`../../assets/${section.image}`, import.meta.url).href
     }
   })
 )

src/components/pages/ResourcesPage.vue

@@ -24,7 +24,7 @@ import LearningResourceWrapper from '@/components/molecules/LearningResourceWrap
 import '@/assets/style.scss'
 import 'bulma/css/bulma.css'
 import { useI18n } from 'vue-i18n'
-import type { MessageSchema } from '../i18n/types'
+import type { MessageSchema } from '@/i18n/types'
 import { computed } from 'vue'
 
 const { tm } = useI18n()
@@ -35,7 +35,7 @@ const resourcesWithImages = computed(() =>
 
     return {
       ...resource,
-      image: new URL(`../assets/${resource.image}`, import.meta.url).href
+      image: new URL(`../../assets/${resource.image}`, import.meta.url).href
     }
   })
 )

src/main.ts

@@ -1,10 +1,7 @@
 import { createApp } from "vue";
 import "./style.css";
 import App from "./App.vue";
-import { createRouter, createWebHistory } from "vue-router";
+import router from "./routes"
-import { routes } from "vue-router/auto-routes";
-
-const router = createRouter({ history: createWebHistory(), routes: routes });
 import i18n from './i18n'
 
 createApp(App).use(i18n).use(router).mount("#app");

src/routes/index.ts

@@ -0,0 +1,30 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+
+import HomePage from '@/components/pages/HomePage.vue'
+import ResourcesPage from '@/components/pages/ResourcesPage.vue'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'Home',
+    component: HomePage,
+  },
+  {
+    path: '/resources',
+    name: 'Resources',
+    component: ResourcesPage,
+  },
+  // {
+  //   path: '/:pathMatch(.*)*',  // Vue Router 4 catch-all for 404s
+  //   name: 'NotFound',
+  //   component: NotFoundPage,
+  // },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router

src/typed-router.d.ts

@@ -18,7 +18,5 @@ declare module 'vue-router/auto-routes' {
    * Route name map generated by unplugin-vue-router
    */
   export interface RouteNamedMap {
-    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
-    '/resources': RouteRecordInfo<'/resources', '/resources', Record<never, never>, Record<never, never>>,
   }
 }