VueJS Tour

Options

WARNING

VueJS Tour is written for Vue 3. There are no plans to support Vue 2.x

Step Properties

target

The target property can be any valid CSS selectoropen in new window.
If the target is not found, the step will be skipped.

  • Type: string
  • Default: undefined
  • Required: true
<script setup>
const steps = [
  {
    target: '#target',
  }
];
</script>



 



content

The content property can be a string or any valid HTMLopen in new window.

  • Type: string | Html
  • Default: undefined
  • Required: true
<script setup>
const steps = [
  {
    target: '#target',
    content: 'This is the content of the step',
  }
];
</script>




 



<script setup>
const steps = [
  {
    target: '#target',
    content: 'This is the <b>content</b> of the step\n' +
            'Using HTML is also <span class="underline font-medium">possible</span>',
  }
];
</script>




 
 



placement

The placement property is used to position the step relative to the target element.

  • Type: string
  • Default: top
  • Required: false
<script setup>
const steps = [
  {
    target: '#target',
    content: 'This is the content of the step',
    placement: 'top',
  }
];
</script>





 



Any of the following values can be used:

auto, auto-start, auto-end, top, top-start, top-end, bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end

TIP

Insufficient space may change the placement of the step to make it fit better.

onNext

The onNext property is used to execute a function when the next button is clicked.
The function has to be a Promise. The step will not advance until the Promise is resolved.

<script setup>
const steps = [
  {
    target: '#target',
    content: 'This is the content of the step',
    placement: 'top',
    onNext: () => {
      return new Promise(async (resolve) => {
          await longRunningFunction();
          resolve();
      });
    },
  }
];
</script>






 
 
 
 
 




TIP

The new step placement will be calculated after the Promise is resolved.

onPrev

The onPrev property is used to execute a function when the back button is clicked.
The function has to be a Promise. The step will not advance until the Promise is resolved.

<script setup>
const steps = [
  {
    target: '#target',
    content: 'This is the content of the step',
    placement: 'top',
    onNext: () => {...},
    onPrev: () => {
      return new Promise(async (resolve) => {
          await longRunningFunction();
          resolve();
      });
    },
  }
];
</script>







 
 
 
 
 




TIP

The new step placement will be calculated after the Promise is resolved.

onShow

The onShow property is used to execute a function after the step is shown.

<script setup>
const steps = [
  {
    target: '#target',
    content: 'This is the content of the step',
    placement: 'top',
    onNext: () => {...},
    onPrev: () => {...},
    onShow: () => {
      console.log('Step is shown');
    },
  }
];
</script>