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";exportconst{ provideAppVariants, useAppVariants }=createVariants({TaskCard: {key: "1",variants: ["A","B","C"]asconst},DebugMode: {key: "2",variants: [false,true]asconst},});// 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.vueimport{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";importCardVariantAfrom"./CardVariantA.vue";importCardVariantBfrom"./CardVariantB.vue";importCardVariantCfrom"./CardVariantC.vue";const { variants } =useAppVariants();</script>
<template>
<div>
<h2>My tasks</h2>
<!-- Cycle through three UI variants using the "1" key -->
<CardVariantAv-if="variants.TaskCard==='A'" />
<CardVariantBv-else-if="variants.TaskCard==='B'" />
<CardVariantCv-else-if="variants.TaskCard==='C'" />
<!-- Toggle debug panel using the "2" key -->
<divv-if="variants.DebugMode"class="debug-panel">Debug enabled</div>
</div>
</template>