Merge branch 'master' of github.com:connorabbas/laravel-inertia-primevue into ssr-develop

Author: connorabbas

resources/js/Components/ToggleDarkModeButton.vue

@@ -1,14 +1,15 @@
 <script setup>
-import { useDark, useToggle } from '@vueuse/core';
+import { inject } from 'vue';
+import { useToggle } from '@vueuse/core';
 
-const isDark = useDark();
-const toggleDark = useToggle(isDark);
+const isDarkMode = inject('darkMode');
+const toggleDark = useToggle(isDarkMode);
 </script>
 
 <template>
     <Button
         title="Toggle Light/Dark Mode"
-        :icon="isDark ? 'pi pi-moon' : 'pi pi-sun'"
+        :icon="isDarkMode ? 'pi pi-moon' : 'pi pi-sun'"
         @click="toggleDark()"
     />
 </template>

resources/js/app.js

@@ -12,7 +12,10 @@ import { ZiggyVue } from '../../vendor/tightenco/ziggy';
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 
+import { useDark } from '@vueuse/core';
+
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+const darkMode = useDark(); // set Light/Dark Mode
 
 createInertiaApp({
     title: (title) => `${title} - ${appName}`,
@@ -23,6 +26,7 @@ createInertiaApp({
         ),
     setup({ el, App, props, plugin }) {
         return createApp({ render: () => h(App, props) })
+            .provide('darkMode', darkMode)
             .use(plugin)
             .use(ZiggyVue)
             .use(PrimeVue, {