Tour

A guided walkthrough component that highlights elements on the page and shows step-by-step instructions. Great for onboarding, feature discovery, and tutorials.

Basic

Click "Start Tour" to walk through the highlighted elements with smooth transitions.

<script setup>
import { ref } from 'vue'
import { VxTour, VxButton, VxInput } from 'veloxui'

const showTour = ref(false)
const steps = [
  {
    target: '#dashboard-btn',
    title: 'Dashboard',
    description: 'Access your main dashboard with key metrics.',
  },
  {
    target: '#settings-btn',
    title: 'Settings',
    description: 'Configure your preferences and security options.',
  },
  {
    target: '#search-input',
    title: 'Search',
    description: 'Find anything across your workspace.',
  },
]
</script>

<template>
  <VxButton id="dashboard-btn" type="primary">Dashboard</VxButton>
  <VxButton id="settings-btn">Settings</VxButton>
  <VxInput id="search-input" placeholder="Search..." />

  <VxButton @click="showTour = true">Start Tour</VxButton>
  <VxTour v-model="showTour" :steps="steps" />
</template>

Placement

Control the popover position per step with the placement option: top, bottom, left, or right. When omitted, it auto-detects the best placement.

<script setup>
import { ref } from 'vue'
import { VxTour, VxButton } from 'veloxui'

const showTour = ref(false)
const steps = [
  { target: '#btn-top', title: 'Top', description: 'Popover above.', placement: 'top' },
  { target: '#btn-right', title: 'Right', description: 'Popover to the right.', placement: 'right' },
  { target: '#btn-bottom', title: 'Bottom', description: 'Popover below.', placement: 'bottom' },
  { target: '#btn-left', title: 'Left', description: 'Popover to the left.', placement: 'left' },
]
</script>

<template>
  <VxButton id="btn-top">Top</VxButton>
  <VxButton id="btn-right">Right</VxButton>
  <VxButton id="btn-bottom">Bottom</VxButton>
  <VxButton id="btn-left">Left</VxButton>
  <VxButton @click="showTour = true">Start Tour</VxButton>
  <VxTour v-model="showTour" :steps="steps" />
</template>

Connected Cards

Target card-based UI elements to guide users through complex layouts.

Create Project

Start something new

Team Settings

Manage members

Analytics

View insights

<script setup>
import { ref } from 'vue'
import { VxTour, VxButton } from 'veloxui'

const showTour = ref(false)
const steps = [
  { target: '#create-card', title: 'Create Project', description: 'Start a new project.' },
  { target: '#team-card', title: 'Team Settings', description: 'Manage your team.' },
  { target: '#analytics-card', title: 'Analytics', description: 'View performance insights.' },
]
</script>

<template>
  <div id="create-card">...</div>
  <div id="team-card">...</div>
  <div id="analytics-card">...</div>
  <VxButton @click="showTour = true">Start Tour</VxButton>
  <VxTour v-model="showTour" :steps="steps" />
</template>

Custom Content

Use the default slot to fully customize each step's content. The slot receives step, index, total, next, prev, and close.

<script setup>
import { ref } from 'vue'
import { VxTour, VxButton } from 'veloxui'

const showTour = ref(false)
const steps = [
  { target: '#home', title: 'Welcome!', description: 'Let us show you around.' },
  { target: '#actions', title: 'Quick Actions', description: 'Access frequent actions here.' },
]
</script>

<template>
  <VxTour v-model="showTour" :steps="steps">
    <!-- Custom step content via default slot -->
    <template #default="{ step, index, total, next, prev, close }">
      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px;">
        <span class="step-badge">{{ index + 1 }}</span>
        <span class="step-title">{{ step?.title }}</span>
      </div>
      <p>{{ step?.description }}</p>
    </template>
  </VxTour>
</template>

Keyboard Navigation

The tour supports keyboard navigation out of the box:

• Arrow Right / Down — Next step
• Arrow Left / Up — Previous step
• Escape — Close tour

API

VxTour Props

Prop	Type	Default	Description
v-model	boolean	false	Controls tour visibility
steps	TourStep[]	[]	Array of step definitions
current	number	0	Current step index
maskClosable	boolean	true	Close tour when clicking the dark overlay
showSkip	boolean	true	Show the "Skip" button
padding	number	10	Padding around the highlighted element (px)
scrollIntoView	boolean	true	Auto-scroll target into view

TourStep

Property	Type	Required	Description
target	string | () => HTMLElement	Yes	CSS selector or function returning the target element
title	string	No	Step title
description	string	No	Step description text
placement	'top' | 'bottom' | 'left' | 'right'	No	Popover placement (auto-detected if omitted)

Events

Event	Payload	Description
update:modelValue	boolean	Tour open/close state changed
update:current	number	Current step index changed
change	number	Step changed (new index)
finish	—	User clicked "Finish" on the last step
skip	—	User clicked "Skip"

Slots

Slot	Props	Description
default	{ step, index, total, isFirst, isLast, next, prev, close }	Custom step content
footer	{ index, total, isFirst, isLast, next, prev, close }	Custom footer (replaces dots + nav buttons)