[#10] WIP: Implement a modular folder structure

layouts/default.vue

@@ -1,6 +1,14 @@
 <template>
-  <div class="bg-emerald-500 h-screen flex items-center justify-center">
-    Navigation Goes here.
-    <slot />
+  <div class="container mx-auto">
+    <h3 class="text-center font-bold gray-700 uppercase mt-48 text-4xl">
+      Welcome to Davor Minchorov's Personal Website and Blog
+    </h3>
+<!--    <nav class="mx-auto mt-10 text-center space-x-5 text-xl">-->
+<!--      <NuxtLink :to="{name: 'blog'}" class="hover:text-green-600">Blog</NuxtLink>-->
+<!--    </nav>-->
+
+    <main class="mt-10">
+      <slot />
+    </main>
   </div>
 </template>

modules/blog/index.ts

@@ -0,0 +1,23 @@
+import { defineNuxtModule } from '@nuxt/kit'
+import {join} from "pathe";
+
+export default defineNuxtModule({
+  name: 'blog',
+  configKey: 'blog',
+  setup (options, nuxt) {
+    nuxt.hook('components:dirs', (dirs: any) => {
+      // Add ./components dir to the list
+      dirs.push({
+        path: join(__dirname, 'components'),
+      });
+    });
+
+    nuxt.options.router.extendRoutes = (routes, resolve) => {
+      routes.push({
+        name: 'blog',
+        path: '/blog',
+        component: resolve(__dirname, 'pages/blog.vue')
+      })
+    }
+  },
+})

modules/blog/pages/blog.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    This is the blog page.
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'blog',
+}
+</script>

modules/home/index.ts

@@ -0,0 +1,23 @@
+import { defineNuxtModule } from '@nuxt/kit'
+import {join} from 'pathe';
+
+export default defineNuxtModule({
+  name: 'home',
+  configKey: 'home',
+  setup (options, nuxt) {
+    nuxt.hook('components:dirs', (dirs: any) => {
+      // Add ./components dir to the list
+      dirs.push({
+        path: join(__dirname, 'components'),
+      });
+    });
+
+    nuxt.options.router.extendRoutes = (routes, resolve) => {
+      routes.push({
+        name: 'home',
+        path: '/home',
+        component: resolve(__dirname, 'pages/home.vue')
+      })
+    }
+  },
+})

modules/home/pages/home.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+      This is the home page.
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'home',
+  }
+</script>

nuxt.config.ts

@@ -1,4 +1,5 @@
 import { defineNuxtConfig } from 'nuxt3';
+import {join} from "pathe";
 
 export default defineNuxtConfig({
   build: {
@@ -10,5 +11,14 @@ export default defineNuxtConfig({
         }
       }
     },
-  }
+  },
+
+  home: {
+    hello: 'there',
+  },
+
+  modules: [
+    '~/modules/blog/index.ts',
+    '~/modules/home/index.ts',
+  ],
 });

pages/index.vue

@@ -1,3 +1,5 @@
 <template>
-  <div>Hello!</div>
+  <div>
+    This is the index file.
+  </div>
 </template>