Project start

src/App.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from "vue-router";
+</script>
+
+<template>
+    <header>
+        <div class="wrapper">
+            <nav>
+                <RouterLink to="/">Home</RouterLink>
+                <RouterLink to="/about">About</RouterLink>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <RouterView />
+    </main>
+
+    <footer>
+        <div>Dexie.js - A Minimalistic Wrapper for IndexedDB</div>
+        <div>
+            &copy; 2014-2024
+            <a href="https://dexie.org/" target="_blank" rel="noopener">
+                Dexie.js
+            </a>
+            is the creation of David Fahlander and managed by Awarica AB.
+        </div>
+    </footer>
+</template>

src/components/HelloWorld.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{
+  msg: string
+}>()
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      You’ve successfully created a project with
+      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>

src/main.ts

@@ -0,0 +1,11 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')

src/router/index.ts

@@ -0,0 +1,23 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+import HomeView from "../views/HomeView.vue";
+
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: "/",
+      name: "home",
+      component: HomeView,
+    },
+    {
+      path: "/about",
+      name: "about",
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import("../views/AboutView.vue"),
+    },
+  ],
+});
+
+export default router;

src/views/AboutView.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h1>This is an about page</h1>
+    </div>
+</template>

src/views/HomeView.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h1>This is home page</h1>
+    </div>
+</template>