provide/inject

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

@@ -25,6 +25,7 @@ createInertiaApp({
         ),
     setup({ el, App, props, plugin }) {
         return createApp({ render: () => h(App, props) })
+            .provide('darkMode', darkMode)
             .use(plugin)
             .use(ZiggyVue, Ziggy)
             .use(PrimeVue, {