iOS Style Segmented Control Component For Vue

A Vue component to create a dynamic segmented control as you have seen in iOS.

How to use it:

1. Import and register the segmented control component.

import iOS13SegmentedControl from "@/vue-ios13-segmented-control.vue";
export default {
  name: 'MyComponent',
  components: { 
    "ios13-segmented-control": iOS13SegmentedControl
  // ...

2. Add the segmented control to the app.

<ios13-segmented-control v-model="value" :segments="segments"/>

3. Available component props.

value: {
  required: true,
  type: [Number, String]
segments: {
  required: true,
  type: Array
elementName: {
  type: String,
  required: false,
  default: () => '' + getRandomInt(100000)


iOS Style Segmented Control Component For Vue

Download Details:

Author: AnalyzePlatypus

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-ios13-segmented-control

$ npm i vue-ios13-segmented-control

Add Comment