Last active
November 15, 2025 08:39
-
-
Save Kcko/57ecd31dd13cb5b96db331c4482af561 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // useFormHandler.js | |
| import { ref } from 'vue' | |
| export function useFormHandler(initialData = {}) { | |
| const formData = ref({ ...initialData }) | |
| const errors = ref({}) | |
| const validate = () => { | |
| errors.value = {} | |
| Object.keys(formData.value).forEach(key => { | |
| if (!formData.value[key]) errors.value[key] = 'Required' | |
| }) | |
| return Object.keys(errors.value).length === 0 | |
| } | |
| return { formData, errors, validate } | |
| } | |
| // ======================================= // | |
| // useTheme.js | |
| import { ref, provide, inject } from 'vue' | |
| const ThemeSymbol = Symbol('Theme') | |
| export function provideTheme() { | |
| const theme = ref('light') | |
| const toggleTheme = () => { | |
| theme.value = theme.value === 'light' ? 'dark' : 'light' | |
| } | |
| provide(ThemeSymbol, { theme, toggleTheme }) | |
| } | |
| export function useTheme() { | |
| const themeContext = inject(ThemeSymbol) | |
| if (!themeContext) throw new Error('useTheme() must be used after provideTheme()') | |
| return themeContext | |
| } | |
| <!-- App.vue --> | |
| <script setup> | |
| import { provideTheme } from './composables/useTheme' | |
| provideTheme() | |
| </script> | |
| <!-- Navbar.vue --> | |
| <script setup> | |
| import { useTheme } from '../composables/useTheme' | |
| const { theme, toggleTheme } = useTheme() | |
| </script> | |
| <template> | |
| <button @click="toggleTheme">Toggle to {{ theme === 'light' ? 'dark' : 'light' }}</button> | |
| </template> | |
| // ======================================= // | |
| // useEventBus.js | |
| import mitt from 'mitt' | |
| const emitter = mitt() | |
| export function useEventBus() { | |
| return emitter | |
| } | |
| // useNotification.js | |
| import { useEventBus } from './useEventBus' | |
| const bus = useEventBus() | |
| export function useNotification() { | |
| const notify = (msg) => bus.emit('notify', msg) | |
| const onNotify = (handler) => bus.on('notify', handler) | |
| return { notify, onNotify } | |
| } | |
| // ======================================= // | |
| // useAppState.js | |
| import { ref } from 'vue' | |
| const globalState = ref({ user: null, theme: 'light' }) | |
| export function useAppState() { | |
| return globalState | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment