useVariants

Vue 3 composable for cycling through UI variants and toggling feature flags via global keyboard shortcuts.

Installation

Just copy useVariants.ts

Usage

1. Create variants.ts

import { createVariants } from "@/composables/useVariants";

export const { provideAppVariants, useAppVariants } = createVariants({
  TaskCard: { key: "1", variants: ["A", "B", "C"] as const },
  DebugMode: { key: "2", variants: [false, true] as const },
});

// The first element in the `variants` array will be used as the default value.

2. Initialize the composable in your root component (App.vue)

import { provideAppVariants } from "@/variants.ts";
provideAppVariants();

Note: Due to how Vue's provide/inject works, inject only resolves values from ancestor components. Since App.vue is the root component, it cannot use useAppVariants() — calling inject there will find no provider above it.

If you need to access variants inside App.vue itself, use the return value of provideAppVariants() instead:

// App.vue
import { provideAppVariants } from "@/variants.ts";
import { watchEffect } from "vue";

const { variants } = provideAppVariants();

watchEffect(() => {
  document.documentElement.classList.toggle("debug", variants.DebugMode); // works correctly
});

3. Use the composable in your components

<script setup lang="ts">
import { useAppVariants } from "@/variants";
import CardVariantA from "./CardVariantA.vue";
import CardVariantB from "./CardVariantB.vue";
import CardVariantC from "./CardVariantC.vue";

const { variants } = useAppVariants();
</script>

<template>
  <div>
    <h2>My tasks</h2>

    <!-- Cycle through three UI variants using the "1" key -->
    <CardVariantA v-if="variants.TaskCard === 'A'" />
    <CardVariantB v-else-if="variants.TaskCard === 'B'" />
    <CardVariantC v-else-if="variants.TaskCard === 'C'" />

    <!-- Toggle debug panel using the "2" key -->
    <div v-if="variants.DebugMode" class="debug-panel">Debug enabled</div>
  </div>
</template>