Vue tour

Features & characteristics:

• Customizable steps
• Customizable styles
• Customizable text

Example

Demo

https://salamanderbe.github.io/vue-tour

Install & basic usage

npm install @salamander.be/vue-tour

<template>
  <div id="app">
    <tour :steps="steps" :text="text" :theme="theme"></tour>
  </div>
</template>

<script>
import Tour from '@salamander.be/vue-tour'
import '@salamander.be/vue-tour/dist/vue-tour.css'

export default {
  name: 'app',
  components: { Tour },
  data: () => ({
    steps: [
      {
        preview: '/example-1.png',
        title: 'Step 1',
        description: 'I am an example step, click in the top right corner to enlarge me. Click next if you no longer want to see me. '
        next_cta: 'Next custom',
        prev_cta: 'Previous custom',
      },
      {
        preview: '/example-1.png',
        title: 'Step 2',
        description: 'Congratz, I am the second step in this 2 step tuturial. If you reached me that means you have reached the end.'
      }
    ],
    text: {
      next_cta: 'Next',
      prev_cta: 'Previous',
      restart_cta: 'Restart'
    },
    theme: {
      color: '#009de0',
      radius: '2px'
    },
    blurEl: '.can-tour-blur',
    debug: true
  })
}
</script>

Configuration

Props

steps: [
  {
    preview: '/example-1.png', // The preview image shown for each step
    title: 'Step 1', // The title of the step
    description: 'Description for step 1' // The description of the step
    next_cta: 'Next custom', // Override the default next text
    prev_cta: 'Previous custom', // Override the default prev text
  }
]
theme: { color: '#color', radius: 'px' } // the theme use while rendering the component
text: { next_cta: '', prev_cta: '', restart_cta: '' } // The fixed texts used in the component
storage: 'custom-storage-key' // Set a custom localstorage key