# @globalhive/vuejs-tour

> VueJS Tour is a lightweight, simple and customizable tour plugin. It provides a quick and easy way to guide your users through your application.

Latest version **3.0.1** (published 2026-03-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @globalhive/vuejs-tour
pnpm add @globalhive/vuejs-tour
yarn add @globalhive/vuejs-tour
bun add @globalhive/vuejs-tour
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2026-03-18 |
| First published | 2022-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 120.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 116 |
| Author | Global Hive |
| Maintainers | saschaguertler |
| Keywords | vue, vuejs, vue.js, vuejs-tour, tour, vuetour, vue-tour, vue3-tour, vue3tour, tour |

## Links

- npm: https://www.npmjs.com/package/@globalhive/vuejs-tour
- Repository: https://github.com/globalhive/vuejs-tour
- Homepage: https://globalhive.github.io/vuejs-tour/
- Issues: https://github.com/globalhive/vuejs-tour/issues
- npm.io page: https://npm.io/package/@globalhive/vuejs-tour

## Dependencies (2)

- [jump.js](https://npm.io/package/jump.js.md) ^1.0.2
- [nanopop](https://npm.io/package/nanopop.md) ^2.4.2

## Recent versions

- 3.0.1 (latest) — 2026-03-18
- 3.0.0 — 2026-01-30
- 2.6.2 — 2026-01-16
- 2.6.1 — 2025-12-17
- 2.6.0 — 2025-11-16
- 2.5.0 — 2025-11-06
- 2.4.3 — 2025-10-12
- 2.4.2 — 2025-10-12
- 2.4.1 — 2025-10-10
- 2.3.8 — 2025-09-26
- 2.3.7 — 2025-09-03
- 2.3.6 — 2025-07-17
- 2.3.5 — 2025-06-10
- 2.3.4 — 2024-12-11
- 2.3.3 — 2024-11-16
- … 39 more at https://npm.io/package/@globalhive/vuejs-tour/versions

## README

# VueJS Tour

[![license](https://img.shields.io/github/license/globalhive/vuejs-tour)](https://github.com/GlobalHive/vuejs-tour/blob/master/LICENSE)
[![docs](https://img.shields.io/github/actions/workflow/status/globalhive/vuejs-tour/docs.yml?branch=master&label=docs)](https://github.com/GlobalHive/vuejs-tour/actions/workflows/docs.yml)
[![build](https://img.shields.io/github/actions/workflow/status/globalhive/vuejs-tour/npm-publish.yml?branch=master)](https://www.npmjs.com/package/@globalhive/vuejs-tour)
[![open issues](https://img.shields.io/github/issues-raw/globalhive/vuejs-tour)](https://github.com/GlobalHive/vuejs-tour/issues)
[![Codacy Badge](https://app.codacy.com/project/badge/Grade/f320aadcc4514cc5aaedafd271be2fd7)](https://app.codacy.com/gh/GlobalHive/vuejs-tour/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)<br>
[![version](https://img.shields.io/npm/v/@globalhive/vuejs-tour)](https://www.npmjs.com/package/@globalhive/vuejs-tour)
[![downloads](https://img.shields.io/npm/dt/@globalhive/vuejs-tour)](https://www.npmjs.com/package/@globalhive/vuejs-tour)
[![producthunt](https://img.shields.io/badge/view_on-ProductHunt-orange)](https://www.producthunt.com/products/vuejs-tour)
[![codecov](https://codecov.io/gh/GlobalHive/vuejs-tour/graph/badge.svg?token=CUET0CGLU9)](https://codecov.io/gh/GlobalHive/vuejs-tour)

> VueJS Tour is a lightweight, simple and customizable tour plugin.
> It provides a quick and easy way to guide your users through your application.

<a href="https://globalhive.github.io/vuejs-tour/"><img src="./vuejs-tour.gif" width="100%"/></a>

## Table of Contents

- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Create a tour](#create-a-tour)
- [Documentation](#documentation)
- [Something Missing?](#something-missing)

## Prerequisites

* [Node.js](https://nodejs.org/)
* [Vue 3 (Composition API)](https://vuejs.org/guide/introduction.html#composition-api)

## Installation

> [!TIP]
> Looking for a nuxt version?
> [Nuxt version (Special thanks to BayBreezy)](https://github.com/BayBreezy/nuxt-tour)

## Create a tour

Add the VueJS Tour component anywhere in your app. It is recommended to add it to `App.vue`
and create the required steps using `<script setup>` syntax.

```vue
<template>
  <div>
    <div id="selectByID">Selected by its id 'selectByID'</div>
    <p class="selectByClass">Telected by its class 'selectByClass'</p>
    <button data-step="3">Selected by the 'data-step="3"' attribute</button>

    <VTour :steps="steps"/>
  </div>
</template>

<script setup>
const steps = [
  {
    target: '#selectByID',
    content: 'This is the first step',
  },
  {
    target: '.selectByClass',
    content: 'This is the second step, placed on the bottom of the target',
    placement: 'bottom',
  },
  {
    target: '[data-step="3"]',
    content: 'This is the third step',
  }
];
</script>
```


## Start the tour

To start the tour, you can use the `autoStart` prop...

```vue
<template>
  <div>
    <div id="selectByID">Selected by its id 'selectByID'</div>
    <p class="selectByClass">Telected by its class 'selectByClass'</p>
    <button data-step="3">Selected by the 'data-step="3"' attribute</button>

    <VTour :steps="steps" autoStart/>
  </div>
</template>

<script setup>
const steps = [...];
</script>
```

...or call the `startTour()` method on the component instance.

```vue
<template>
  <div>
    <div id="selectByID">Selected by its id 'selectByID'</div>
    <p class="selectByClass">Telected by its class 'selectByClass'</p>
    <button data-step="3">Selected by the 'data-step="3"' attribute</button>

    <VTour ref="tour" :steps="steps"/>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const tour = ref(null);

const steps = [...];

onMounted(() => {
  tour.value.startTour();
});
</script>
```

The `target` property of the step object can be any valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).

## Documentation

For more information about the available props and methods, check out the [documentation](https://globalhive.github.io/vuejs-tour/).

## Something Missing?

If you have a feature request or found a bug, [let us know](https://github.com/GlobalHive/vuejs-tour/issues) by submitting an issue.

---
_Source: https://npm.io/package/@globalhive/vuejs-tour · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._