Skip to main content

​
Usage

The VWindow component creates a container for transitioning between content using VWindowItem children. 
<template>
  <v-window v-model="window">
    <v-window-item value="1">
      First window content
    </v-window-item>
    <v-window-item value="2">
      Second window content
    </v-window-item>
    <v-window-item value="3">
      Third window content
    </v-window-item>
  </v-window>
</template>

<script setup>
import { ref } from 'vue'
const window = ref('1')
</script>

​
With Arrows

Display navigation arrows for moving between items: 
<template>
  <v-window
    v-model="window"
    show-arrows
  >
    <v-window-item
      v-for="n in 3"
      :key="n"
      :value="n"
    >
      Window {{ n }}
    </v-window-item>
  </v-window>
</template>

​
Vertical Direction

Transition items vertically instead of horizontally: 
<template>
  <v-window
    v-model="window"
    direction="vertical"
  >
    <!-- window items -->
  </v-window>
</template>

​
Continuous

Enable continuous looping: 
<template>
  <v-window
    v-model="window"
    continuous
    show-arrows
  >
    <!-- window items -->
  </v-window>
</template>

​
Touch Support

The window supports touch gestures by default. You can disable or customize touch behavior: 
<template>
  <v-window
    v-model="window"
    :touch="false"
  >
    <!-- window items -->
  </v-window>
</template>

​
Props

​
modelValue
any
The v-model value of the currently active window item
​
continuous
boolean
default:"false"
Allows continuous cycling from the last item to the first and vice versa
​
nextIcon
IconValue
default:"$next"
Icon used for the next button
​
prevIcon
IconValue
default:"$prev"
Icon used for the previous button
​
reverse
boolean
default:"false"
Reverses the normal transition direction
​
showArrows
boolean | 'hover'
Displays navigation arrows. Use ‘hover’ to show arrows only on hover
​
verticalArrows
boolean | 'left' | 'right'
Positions arrows vertically on the left or right side
​
touch
boolean | object
Enable/disable touch support or provide custom touch handlers
​
direction
'horizontal' | 'vertical'
default:"horizontal"
The direction of the transition
​
disabled
boolean
default:"false"
Disables window navigation
​
selectedClass
string
default:"v-window-item--active"
CSS class applied to the selected item
​
mandatory
boolean | 'force'
default:"force"
Forces at least one item to always be selected
​
crossfade
boolean
default:"false"
Uses a crossfade transition instead of the default slide transition
​
transitionDuration
number
Custom transition duration in milliseconds
​
theme
string
Specify a theme for this component and all of its children

​
Slots

​
default
slot
The default slot for window items
​
additional
slot
Slot for additional content outside the window container
​
prev
slot
Slot to customize the previous button
​
next
slot
Slot to customize the next button

​
Events

​
update:modelValue
event
Emitted when the active window item changes
The window component supports keyboard navigation using arrow keys when focused.

Build docs developers (and LLMs) love

Get started for freeTalk to us