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();

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>