added vuetify and pinia stores

Author: hipertracker

components/DarkMode.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useTheme } from "vuetify";
+import {useMainStore} from "~/stores/main.ts";
+const theme = useTheme();
+const store = useMainStore();
+const {darkMode} = toRefs(store);
+console.log("darkMode", darkMode);
+function toggleTheme() {
+  theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
+}
+</script>
+
+
+<template>
+  <v-btn icon @click="toggleTheme" :ripple="false">
+    <v-icon v-if="theme.global.current.value.dark" medium>mdi-weather-night</v-icon>
+    <v-icon v-else small>mdi-white-balance-sunny</v-icon>
+  </v-btn>
+</template>

layouts/default.vue

@@ -0,0 +1,7 @@
+
+<template>
+  <v-app>
+    <slot/>
+  </v-app>
+</template>
+

nuxt.config.ts

@@ -1,7 +1,34 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
 export default defineNuxtConfig({
-  devtools: { enabled: true },
+
+  devtools: {
+    enabled: true,
+
+    timeline: {
+      enabled: true,
+    },
+  },
+  build: {
+    transpile: ['vuetify'],
+  },
   modules: [
+    (_options, nuxt) => {
+      nuxt.hooks.hook('vite:extendConfig', (config) => {
+        // @ts-expect-error
+        config.plugins.push(vuetify({ autoImport: true }));
+      });
+    },
     '@pinia/nuxt',
+    '@pinia-plugin-persistedstate/nuxt',
+    '@nuxt/devtools',
   ],
+  vite: {
+    vue: {
+      template: {
+        transformAssetUrls,
+      },
+    },
+  },
 });