### Install VueOnboardingTour with npm

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Installs the VueOnboardingTour package using npm. This is the first step to integrating the guided tour component into your Vue.js project.

```bash
npm install vue-onboarding-tour
```

--------------------------------

### Install VueOnboardingTour with npm

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Installs the vue-onboarding-tour package using npm. This is the first step to integrate the guided tour component into your Vue.js project.

```bash
npm install vue-onboarding-tour
```

--------------------------------

### VueOnboardingTour with Auto Start

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Configures VueOnboardingTour to automatically start the tour when the component is mounted by setting the `startTour` prop to `true`. This is useful for immediate user guidance.

```html
<VueOnboardingTour :tourId="123" :steps="steps" :startTour="true" />
```

--------------------------------

### Install VueOnboardingTour with yarn

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Installs the VueOnboardingTour package using yarn. This command is an alternative to npm for adding the guided tour component to your Vue.js application.

```bash
yarn add vue-onboarding-tour
```

--------------------------------

### VueOnboardingTour with Custom Start Event

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Enables starting the VueOnboardingTour based on a custom event by using the `startEvent` prop. This allows the tour to be triggered by specific user interactions or application events.

```html
<VueOnboardingTour :tourId="123" :steps="steps" startEvent="showTour" />
```

--------------------------------

### Install VueOnboardingTour with yarn

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Installs the vue-onboarding-tour package using yarn. This is an alternative method for adding the guided tour component to your Vue.js project.

```bash
yarn add vue-onboarding-tour
```

--------------------------------

### VueOnboardingTour usage to start tour automatically

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Demonstrates how to initiate the onboarding tour automatically when the component mounts by setting the `startTour` prop to `true`. This is useful for immediate user guidance upon page load.

```html
<VueOnboardingTour :tourId="123" :steps="steps" :startTour="true" />
```

--------------------------------

### Start Tour Programmatically

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

This method allows you to initiate the onboarding tour programmatically. It's useful for triggering the tour based on specific user interactions or application states, such as after a button click. The example shows how to call the startTour() method on the component's ref.

```javascript
this.$refs.onboardingTour.startTour()
```

--------------------------------

### Vue: Handle Tour Start Event

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Demonstrates how to listen for the `startTour` event emitted by the `VueOnboardingTour` component. This event is triggered when the tour begins, allowing for custom actions or logging.

```html
<VueOnboardingTour @startTour="handleStart" />
```

```javascript
methods: {
  handleStart() {
    console.log('The tour has started.')
  }
}
```

--------------------------------

### Start Vue Onboarding Tour Programmatically

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

This code snippet shows how to programmatically start the onboarding tour using the startTour() method. It is typically called via a reference to the tour component, often in response to a user action like a button click.

```javascript
this.$refs.onboardingTour.startTour()
```

--------------------------------

### Vue: Define Tour Steps with Options

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Provides an example of the `steps` prop, which is an array of objects defining each step in the tour. Each step can include a `target` element, `title`, `description`, `tag`, `beforeScript`, `afterScript`, and a `disable` flag.

```javascript
const steps = [
  {
    target: '#step1',
    title: 'Welcome',
    description: 'This is the starting point of the tour.',
    tag: 'Step 1',
    beforeScript: () => console.log('Preparing for Step 1'),
    afterScript: () => console.log('Completed Step 1'),
  },
  {
    target: '#step2',
    title: 'Feature Overview',
    description: 'Here you can learn about the main features of our app.',
    tag: 'Step 2',
  },
]
```

--------------------------------

### Vue: Handle Tour Start Event

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Demonstrates how to listen for the `startTour` event emitted by the `VueOnboardingTour` component. This event is triggered when the tour begins, allowing for custom actions or logging.

```html
<VueOnboardingTour @startTour="handleStart" />
```

```javascript
methods: {
  handleStart() {
    console.log('The tour has started.')
  }
}
```

--------------------------------

### Go to Previous Step in Vue Tour

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

This example shows how to navigate back to the previous step in the onboarding tour programmatically using the goPreviousStep() method. This provides flexibility in user-guided tour experiences.

```javascript
this.$refs.onboardingTour.goPreviousStep()
```

--------------------------------

### Vue: Define Tour Steps with Options

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Provides an example of the `steps` prop, which is an array of objects defining each step in the tour. Each step can include a `target` element, `title`, `description`, `tag`, `beforeScript`, `afterScript`, and a `disable` flag.

```javascript
const steps = [
  {
    target: '#step1',
    title: 'Welcome',
    description: 'This is the starting point of the tour.',
    tag: 'Step 1',
    beforeScript: () => console.log('Preparing for Step 1'),
    afterScript: () => console.log('Completed Step 1'),
  },
  {
    target: '#step2',
    title: 'Feature Overview',
    description: 'Here you can learn about the main features of our app.',
    tag: 'Step 2',
  },
]
```

--------------------------------

### VueOnboardingTour usage with custom start event

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Shows how to trigger the VueOnboardingTour using a custom event name via the `startEvent` prop. This allows the tour to be initiated by specific user actions or application events.

```html
<VueOnboardingTour :tourId="123" :steps="steps" startEvent="showTour" />
```

--------------------------------

### Vue: Start Tour with Custom Event

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Demonstrates how to trigger the Vue Onboarding Tour from a parent component by emitting a custom event. The parent component emits 'showTour' which is listened to by the VueOnboardingTour component via the `startEvent` prop.

```html
<template>
  <div>
    <button @click="startTour">Start Tour</button>
    <VueOnboardingTour
      :tourId="123"
      :steps="steps"
      startEvent="showTour"
      labelTerminate="Finish Tour"
    />
    <div id="step1"></div>
    <div id="step2"></div>
  </div>
</template>
```

```javascript
<script lang="ts">
  export default {
    data() {
      return {
        steps: [
          {
            target: '#step1',
            title: 'Welcome',
            description: 'This is the first step of the tour.',
          },
          {
            target: '#step2',
            title: 'Features',
            description: 'This is where you can find features overview.',
          },
        ],
      }
    },
    methods: {
      startTour() {
        // Emit the custom event to start the tour
        window.dispatchEvent(new CustomEvent('showTour'))
      },
    },
  }
</script>
```

--------------------------------

### Basic VueOnboardingTour Usage with tourId

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Demonstrates the basic usage of the VueOnboardingTour component, setting a unique tourId and providing the steps array. This is essential for identifying and configuring a specific tour.

```html
<VueOnboardingTour :tourId="123" :steps="steps" />
```

--------------------------------

### Vue: Start Tour with Custom Event

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Demonstrates how to trigger the Vue Onboarding Tour from a parent component by emitting a custom event. The parent component emits 'showTour' which is listened to by the VueOnboardingTour component via the `startEvent` prop.

```html
<template>
  <div>
    <button @click="startTour">Start Tour</button>
    <VueOnboardingTour
      :tourId="123"
      :steps="steps"
      startEvent="showTour"
      labelTerminate="Finish Tour"
    />
    <div id="step1"></div>
    <div id="step2"></div>
  </div>
</template>
```

```javascript
<script lang="ts">
  export default {
    data() {
      return {
        steps: [
          {
            target: '#step1',
            title: 'Welcome',
            description: 'This is the first step of the tour.',
          },
          {
            target: '#step2',
            title: 'Features',
            description: 'This is where you can find features overview.',
          },
        ],
      }
    },
    methods: {
      startTour() {
        // Emit the custom event to start the tour
        window.dispatchEvent(new CustomEvent('showTour'))
      },
    },
  }
</script>
```

--------------------------------

### Go to Previous Tour Step

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

This method allows navigation back to the previous step within the onboarding tour. It's useful for providing users with the ability to review previous information or correct any mistakes. The example shows how to call goPreviousStep() using the component's ref.

```javascript
this.$refs.onboardingTour.goPreviousStep()
```

--------------------------------

### End Vue Onboarding Tour Programmatically

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

This example demonstrates how to programmatically end the onboarding tour using the endTour() method. This is useful for terminating the tour prematurely based on certain conditions or user interactions.

```javascript
this.$refs.onboardingTour.endTour()
```

--------------------------------

### Go to Next Tour Step

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

This function advances the onboarding tour to the subsequent step. It's beneficial for creating custom navigation flows or allowing users to skip ahead in the tour. The example illustrates calling goNextStep() on the component's ref.

```javascript
this.$refs.onboardingTour.goNextStep()
```

--------------------------------

### Register VueOnboardingTour Plugin (Vue 3)

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Registers VueOnboardingTour as a Vue plugin for Vue 3 applications. This makes the guided tour component available within your Vue 3 project.

```javascript
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueOnboardingTour from 'vue-onboarding-tour'

const app = createApp(App)
app.use(VueOnboardingTour)
app.mount('#mount')
```

--------------------------------

### Set Specific Tour Step by Index

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

This function enables you to directly navigate to a particular step in the onboarding tour by providing its index. This is helpful for implementing features like a table of contents or allowing users to jump to a specific point of interest. The example demonstrates calling setStep(2) to move to the third step.

```javascript
this.$refs.onboardingTour.setStep(2) // Jumps to the third step
```

--------------------------------

### VueOnboardingTour basic usage with tourId

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Demonstrates the basic usage of the VueOnboardingTour component, setting a unique tourId and providing an array of steps. The tourId is crucial for cookie storage to prevent repeated tours.

```html
<VueOnboardingTour :tourId="123" :steps="steps" />
```

--------------------------------

### Go to Next Step in Vue Tour

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

This code snippet illustrates how to advance the onboarding tour to the next step programmatically using the goNextStep() method. This allows for custom control over the tour's progression.

```javascript
this.$refs.onboardingTour.goNextStep()
```

--------------------------------

### VueOnboardingTour with Custom Template

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Shows how to disable the default tour template in VueOnboardingTour by setting the `defaultTemplate` prop to `false`. This allows for custom styling and layout of tour steps.

```html
<VueOnboardingTour :tourId="123" :steps="steps" :defaultTemplate="false" />
```

--------------------------------

### Register VueOnboardingTour in Vue 3

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Registers the VueOnboardingTour component as a Vue plugin in a Vue 3 application. This enables the guided tour component for use throughout your project.

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import VueOnboardingTour from 'vue-onboarding-tour'

const app = createApp(App)
app.use(VueOnboardingTour)
app.mount('#app')
```

--------------------------------

### Register VueOnboardingTour Plugin (Vue 2)

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Registers VueOnboardingTour as a Vue plugin for Vue 2 applications. This enables the use of the component throughout your Vue instance.

```javascript
// main.js
import Vue from 'vue'
import App from './App.vue'
import VueOnboardingTour from 'vue-onboarding-tour'

Vue.use(VueOnboardingTour)

new Vue({
  render: (h) => h(App),
}).$mount('#app')
```

--------------------------------

### VueOnboardingTour with Overlay Disabled

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Illustrates disabling the highlight overlay in VueOnboardingTour by setting the `overlay` prop to `false`. This removes the visual masking effect around the target element.

```html
<VueOnboardingTour :tourId="123" :steps="steps" :overlay="false" />
```

--------------------------------

### Register VueOnboardingTour in Vue 2

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Registers the VueOnboardingTour component as a Vue plugin in a Vue 2 application. This makes the component available globally within your project.

```javascript
import Vue from 'vue'
import App from './App.vue'
import VueOnboardingTour from 'vue-onboarding-tour'

Vue.use(VueOnboardingTour)

new Vue({
  render: (h) => h(App),
}).$mount('#app')
```

--------------------------------

### Handle endTour Event

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

This snippet demonstrates how to listen for the 'endTour' event emitted by the VueOnboardingTour component. The event is triggered when the tour concludes, either by reaching the last step or programmatically calling endTour(). The example shows how to bind a method 'handleEnd' to this event to execute custom logic, such as logging a message to the console.

```html
<VueOnboardingTour @endTour="handleEnd" />
```

```javascript
methods: {
  handleEnd() {
    console.log('The tour has ended.')
  }
}
```

--------------------------------

### End Tour Programmatically

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

This method enables you to terminate the onboarding tour prematurely. It can be invoked to stop the tour at any point, for instance, if the user navigates away from the relevant section of the application. The example demonstrates calling the endTour() method via the component's ref.

```javascript
this.$refs.onboardingTour.endTour()
```

--------------------------------

### Handle endTour Event in Vue

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

This snippet demonstrates how to listen for the 'endTour' event emitted by the VueOnboardingTour component. The event is triggered when the tour concludes, either by reaching the last step or programmatically calling endTour(). The example shows a method to log a message when the tour ends.

```html
<VueOnboardingTour @endTour="handleEnd" />
```

```javascript
methods: {
  handleEnd() {
    console.log('The tour has ended.')
  }
}
```

--------------------------------

### VueOnboardingTour usage with custom template disabled

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Shows how to disable the default tour template in VueOnboardingTour by setting the `defaultTemplate` prop to `false`. This allows for custom styling and layout of tour steps.

```html
<VueOnboardingTour :tourId="123" :steps="steps" :defaultTemplate="false" />
```

--------------------------------

### Vue: Enable Cookie Storage for Tour Completion

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Demonstrates enabling `cookieStorage` to ensure the tour is only shown once per user by storing completion status in a cookie. This is a boolean prop, set to `true` to activate.

```html
<VueOnboardingTour :tourId="123" :steps="steps" :cookieStorage="true" />
```

--------------------------------

### Vue: Customize Tour Termination Label

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Shows how to change the text of the button used to close the tour at the final step using the `labelTerminate` prop. This allows for custom branding or language.

```html
<VueOnboardingTour :tourId="123" :steps="steps" labelTerminate="Finish" />
```

--------------------------------

### Vue: Enable Cookie Storage for Tour Completion

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Demonstrates enabling `cookieStorage` to ensure the tour is only shown once per user by storing completion status in a cookie. This is a boolean prop, set to `true` to activate.

```html
<VueOnboardingTour :tourId="123" :steps="steps" :cookieStorage="true" />
```

--------------------------------

### VueOnboardingTour usage with overlay disabled

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Illustrates disabling the visual overlay mask in VueOnboardingTour by setting the `overlay` prop to `false`. This can be useful if the overlay interferes with specific UI elements or user interactions.

```html
<VueOnboardingTour :tourId="123" :steps="steps" :overlay="false" />
```

--------------------------------

### Set Specific Step in Vue Tour

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

This code snippet demonstrates how to programmatically set the tour to a specific step using the setStep(index) method. It allows direct navigation to any step in the tour by providing its index.

```javascript
this.$refs.onboardingTour.setStep(2) // Jumps to the third step
```

--------------------------------

### Vue: Customize Tour Termination Label

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Shows how to change the text of the button used to close the tour at the final step using the `labelTerminate` prop. This allows for custom branding or language.

```html
<VueOnboardingTour :tourId="123" :steps="steps" labelTerminate="Finish" />
```

--------------------------------

### Vue: Configure Scrollable Container

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Shows how to specify a CSS selector for a scrollable container using the `scrollableContainerSelector` prop. This allows the tour to scroll a specific element into view instead of the entire page, useful for complex layouts.

```html
<VueOnboardingTour :tourId="123" :steps="steps" scrollableContainerSelector="#main-container" />
```

--------------------------------

### Cookie Storage Format

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

This JSON structure represents the format of the cookie used for persisting the onboarding tour's completion state. It includes a unique 'tourId' and the 'completedAt' timestamp in ISO 8601 format, indicating when the tour was finished.

```json
{
  "tourId": "123",
  "completedAt": "2024-11-12T12:00:00Z"
}
```

--------------------------------

### Enable Cookie Storage and Set Expiration

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

This HTML snippet demonstrates how to configure the VueOnboardingTour component to use cookie storage for persisting tour completion and set an expiration date. By setting `cookieStorage` to `true` and providing an `endDate`, the tour will only be shown once per user until the specified date.

```html
<VueOnboardingTour
  :tourId="123"
  :steps="steps"
  :cookieStorage="true"
  :endDate="new Date('2025-01-01')"
/>
```

--------------------------------

### Vue: Set Tour Expiration Date

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/README.md

Illustrates setting an expiration date for the tour using the `endDate` prop. If `cookieStorage` is also enabled, cookies will expire on this date. This prevents the tour from being shown after the specified date.

```html
<VueOnboardingTour
  :tourId="123"
  :steps="steps"
  :cookieStorage="true"
  :endDate="new Date('2025-01-01')"
/>
```

--------------------------------

### Enable Vue Tour Cookie Storage and Set Expiration

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

This HTML snippet shows how to configure the VueOnboardingTour component to use cookie storage for persisting tour completion and set an expiration date for the tour. This ensures the tour is shown only once until the specified end date.

```html
<VueOnboardingTour
  :tourId="123"
  :steps="steps"
  :cookieStorage="true"
  :endDate="new Date('2025-01-01')"
/>
```

--------------------------------

### Vue: Configure Scrollable Container

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Shows how to specify a CSS selector for a scrollable container using the `scrollableContainerSelector` prop. This allows the tour to scroll a specific element into view instead of the entire page, useful for complex layouts.

```html
<VueOnboardingTour :tourId="123" :steps="steps" scrollableContainerSelector="#main-container" />
```

--------------------------------

### Vue Tour Cookie Storage Format

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

This JSON structure defines the format of the cookie used for persisting the onboarding tour's completion status. It includes the tour's unique ID and the timestamp of completion.

```json
{
  "tourId": "123",
  "completedAt": "2024-11-12T12:00:00Z"
}
```

--------------------------------

### Vue: Set Tour Expiration Date

Source: https://github.com/actechworld/vue-onboarding-tour/blob/master/library/README.md

Illustrates setting an expiration date for the tour using the `endDate` prop. If `cookieStorage` is also enabled, cookies will expire on this date. This prevents the tour from being shown after the specified date.

```html
<VueOnboardingTour
  :tourId="123"
  :steps="steps"
  :cookieStorage="true"
  :endDate="new Date('2025-01-01')"
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.