Blog Detail


V-Switch-Case - A V-Switch Component for Vue Js  cover image

arrow_back V-Switch-Case - A V-Switch Component for Vue Js

lmiller1990 introduced a simple v-switch, v-case, and v-default directive set for Vue.js 2. If you have multiple tests cases for a particular expression. we can utilize the switch statement instead of writing multiple if/else statements in vue. So you can practice the v-switch-case in this condition. If you want something similar for Vue.js 3, you can check out v-switch.

You can view its live demo here:


<div v-switch="size">
  <h1 v-case="'large'">Large</h1>
  <h2 v-case="'small'">Medium</h2>
  <h3 v-default>Default</h3>


You have to run this command for the installation via npm.

npm install v-switch-case

Or you can use script tag:

<script src=""></script>


Node.js env (using webpack for example):

  <div v-switch="subjects">
    <h1 v-case="'maths'">Maths</h1>
    <h2 v-case="'english'">English</h2>
    <h3 v-case="'computer'">Computer</h3>
import Vue from 'vue'
import VSwitch from 'v-switch-case'


export default {
  data() {
    return {
      size: 'english'

You can also use it with CDN:

<script src=""></script>
<script src=""></script>


If you wanted to employ this package in your project you can view its complete guide on Github.

Published at : 05-08-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project