Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// src/composables/useLocalStorage.ts
import { ref, watch } from 'vue';

export function useLocalStorage<T>(key: string, defaultValue: T) {
  const stored = localStorage.getItem(key);
  const data   = ref<T>(stored ? JSON.parse(stored) : defaultValue);

watch(data, (val) => {
    localStorage.setItem(key, JSON.stringify(val));
  }, { deep: true });

return data;
}

// src/composables/useToggle.ts
import { ref } from 'vue';
export function useToggle(initial = false) {
  const state  = ref(initial);
  const toggle = () => { state.value = !state.value; };
  return [state, toggle] as const;
}

// src/composables/useEventListener.ts
import { onMounted, onUnmounted } from 'vue';
export function useEventListener(
  target: EventTarget,
  event: string,
  handler: EventListener
) {
  onMounted(()   => target.addEventListener(event, handler));
  onUnmounted(() => target.removeEventListener(event, handler));
}

// ── Usage in a component ──────────────────────
<script setup>
import { useLocalStorage } from '@/composables/useLocalStorage';
import { useToggle }       from '@/composables/useToggle';

const theme         = useLocalStorage('theme', 'light');
const [isDark, toggleDark] = useToggle();
</script>