chore: Refactored home page content out of App.vue and into separate index.vue file created for the vue-router

src/App.vue

@@ -4,45 +4,18 @@
       <RouterLink to="/">Home</RouterLink>
       <RouterLink to="/resources">Resources</RouterLink>
     </nav>
-
     <RouterView />
-
-    <section class="section">
-      <h1 class="title has-text-black p-6">BRÅTULA VIOSSA.NET MÅDE</h1>
-    </section>
-
-    <section class="section">
-      <HomeSectionWrapper 
-        v-for="(section, index) in sectionList" 
-        :key="index"
-        :title="section.title"
-        :text="section.text"
-        :image="section.image"
-        :alt="section.alt"
-        :reverse="index % 2 !== 0"
-      />
-    </section>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import PaddingWrapper from './components/molecules/PaddingWrapper.vue'
+// import HomeSectionWrapper from './components/molecules/HomeSectionWrapper.vue'
-import IntroSection from './components/organisms/IntroSection.vue'
-import HistorySection from './components/organisms/HistorySection.vue'
 import './assets/style.scss'
 import 'bulma/css/bulma.css'
+// import { useI18n } from 'vue-i18n'
+// import type { MessageSchema } from './i18n/types'
 
-export default {
+// const { t, tm } = useI18n()
-  name: 'app',
+
-  components: {
+// console.log(sectionList.value)
-    PaddingWrapper,
-    IntroSection,
-    HistorySection
-  },
-  data() {
-    return {
-      sectionList: ['IntroSection', 'HistorySection']
-    }
-  }
-}
 </script>

src/routes/index.vue

@@ -1,32 +1,34 @@
 <template>
 	<div class="min-h-screen flex flex-col" style="gap: 4rem">
 		<!-- Main application wrapper -->
-		<!-- <SideBar /> -->
+    <section class="section">
-
       <h1 class="title has-text-black p-6">BRÅTULA VIOSSA.NET MÅDE</h1>
+    </section>
 
-		<PaddingWrapper
+    <section class="section">
-			v-for="(sectionName, index) in sectionList"
+      <HomeSectionWrapper 
+        v-for="(section, index) in sectionList" 
         :key="index"
-		>
+        :title="section.title"
-			<component :is="sectionName" />
+        :text="section.text"
-		</PaddingWrapper>
+        :image="section.image"
+        :alt="section.alt"
+        :reverse="index % 2 !== 0"
+      />
+    </section>
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-// import SideBar from './components/organisms/SideBar.vue'
+import HomeSectionWrapper from '@/components/molecules/HomeSectionWrapper.vue'
-import PaddingWrapper from "../components/molecules/PaddingWrapper.vue";
+import '@/assets/style.scss'
-import IntroSection from "../components/organisms/IntroSection.vue";
+import 'bulma/css/bulma.css'
-import HistorySection from "../components/organisms/HistorySection.vue";
+import { useI18n } from 'vue-i18n'
-import "../assets/style.scss";
+import type { MessageSchema } from '../i18n/types'
-import "bulma/css/bulma.css";
+import { computed } from 'vue'
 
-export default {
+const { tm } = useI18n()
-	name: "app",
+const sectionList = computed<MessageSchema['sections']>(() => tm('sections'))
-	components: { PaddingWrapper, IntroSection, HistorySection },
+
-	data() {
+console.log(sectionList.value)
-		return { sectionList: ["IntroSection", "HistorySection"] };
-	},
-};
 </script>

tsconfig.app.json

@@ -10,6 +10,10 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
     "noUncheckedIndexedAccess": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
   },
   "include": [
     "src/**/*.ts",

vite.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from "vite";
+import { fileURLToPath, URL } from 'node:url'
 import vue from "@vitejs/plugin-vue";
 import tailwindcss from "@tailwindcss/vite";
 import vueRouter from "unplugin-vue-router/vite";
@@ -14,4 +15,9 @@ export default defineConfig({
     outDir: "/var/www/viossa.net",
     emptyOutDir: true,
   },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
 });