- Customizable steps
- Customizable styles
- Customizable text
https://salamanderbe.github.io/vue-tour
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>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