🎉 Initial Commit

app/app.vue

@@ -0,0 +1,10 @@
+<template>
+  <nuxt-layout>
+    <nuxt-page />
+  </nuxt-layout>
+</template>
+
+<script lang="ts">
+import "@fontsource-variable/nunito"
+import "@mdi/font/css/materialdesignicons.css"
+</script>

app/composables/useCustomTheme.ts

@@ -0,0 +1,22 @@
+import { useDark, useToggle } from "@vueuse/core"
+
+// composables/useCustomTheme.ts
+export function useCustomTheme(): {
+  isDark: WritableComputedRef<boolean, boolean>
+  toggle: (value?: boolean | undefined) => boolean
+} {
+  const { $vuetify } = useNuxtApp()
+
+  const isDark = useDark({
+    valueDark: "dark",
+    valueLight: "light",
+    initialValue: "light",
+    onChanged: (dark: boolean) => {
+      $vuetify.theme.global.name.value = dark ? "dark" : "light"
+    }
+  })
+
+  const toggle = useToggle(isDark)
+
+  return { isDark, toggle }
+}

app/layouts/default.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-app :theme="isDark ? 'dark' : 'light'">
+    <v-app-bar flat>
+      <v-container class="mx-auto d-flex align-center justify-center">
+        <v-btn
+          v-for="link in links"
+          :key="link.title"
+          :text="link.title"
+          :to="link.href"
+          :prepend-icon="link.icon"
+          variant="text"
+        />
+
+        <v-spacer />
+
+        <v-responsive max-width="160">
+          <v-avatar class="me-4" color="grey-darken-1" size="32" />
+        </v-responsive>
+      </v-container>
+    </v-app-bar>
+
+    <v-main>
+      <slot />
+    </v-main>
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+import { useCustomTheme } from "~/composables/useCustomTheme"
+import type { NavLink } from "~/types/navlink"
+
+const { isDark } = useCustomTheme()
+
+const links: NavLink[] = [
+  {
+    title: "Explore",
+    href: "/",
+    icon: "mdi-compass"
+  }
+]
+</script>

app/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <v-container>
+    <h1>Welcome!</h1>
+  </v-container>
+</template>

app/types/navlink.ts

@@ -0,0 +1,5 @@
+export interface NavLink {
+    title: string
+    href: string
+    icon: string
+}