VueComponent-SwitchCase

A simple Vue 3 plugin for switch-case style conditional rendering using custom directives: v-switch, v-case, and v-default.

https://www.npmjs.com/package/switch-case-vue

Installation

npm i switch-case-vue

Or copy src/index.js into your project.

Usage

Register the plugin in your main entry file:

import { createApp } from 'vue';
import App from './App.vue';
import VueSwitchCase from 'switch-case-vue';

const app = createApp(App);
app.use(VueSwitchCase);
app.mount('#app');

Example

<template>
  <div>
    <button @click="switchValue = 'A'">Show A</button>
    <button @click="switchValue = 'B'">Show B</button>
    <button @click="switchValue = 'C'">Show C</button>
    <div v-switch="switchValue">
      <div v-case="'A'">Case A is active!</div>
      <div v-case="'B'">Case B is active!</div>
      <div v-case="'C'">Case C is active!</div>
      <div v-default>Default case: nothing matched.</div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const switchValue = ref('A');
    return { switchValue };
  }
};
</script>

API

• v-switch="value" — Container directive, controls which child to show.
• v-case="value" — Child directive, shown if its value matches the switch value.
• v-default — Child directive, shown if no case matches.

License

MIT