The code to add a highlight to the element for vue-tour

vue-tour-highlight.js

/**
 * TOUR_ACTIVE_CLASS - The class for the active step element
 * BODY_TOUR - The class we add to the body to show the tour is active for click events.
 */
const TOUR_ACTIVE_CLASS = 'tour-active',
      BODY_TOUR         = 'in-tour';

module.exports = {
	tourMixin: {
		data() {
			return {
				myTourCallbacks: {
					onStart:        this.onStartTour,
					onNextStep:     this.onNextStep,
					onPreviousStep: this.onPreviousStep,
					onStop:         this.onStop,
				},
			};
		},
		methods: {
			onStartTour() {
				const curStepEl = document.querySelector(this.tourSteps[ 0 ].target);
				
				//Add the in-tour class to body
				document.body.classList.add(BODY_TOUR);
				//Add the active class for the first step
				curStepEl.classList.add(TOUR_ACTIVE_CLASS);
			},
			onNextStep(step) {
				const curStepEl = document.querySelector(this.tourSteps[ step ].target);
				const nextStepEl = document.querySelector(this.tourSteps[ step + 1 ].target);
				
				//Add active class to next step and remove from current.
				curStepEl.classList.remove(TOUR_ACTIVE_CLASS);
				nextStepEl.classList.add(TOUR_ACTIVE_CLASS);
			},
			onPreviousStep(step) {
				const curStepEl = document.querySelector(this.tourSteps[ step ].target);
				const prevStepEl = document.querySelector(this.tourSteps[ step - 1 ].target);
				
				//Add active step to previous and remove from current.
				curStepEl.classList.remove(TOUR_ACTIVE_CLASS);
				prevStepEl.classList.add(TOUR_ACTIVE_CLASS);
			},
			onStop() {
				//We finished the tour, so remove in-tour from body and remove active class.
				document.body.classList.remove(BODY_TOUR);
				document.querySelector(`.${TOUR_ACTIVE_CLASS}`).classList.remove(TOUR_ACTIVE_CLASS);
			},
		},
	},
};

/*
  // Tour CSS
	
	// add pointer-events none to body if the tour is active.
	body.in-tour {
		pointer-events: none;
	}
	
	// Set index on step to show it above.
	.v-step {
		z-index: 9999;
	}
	
	// sets the tour-active element to have a shadow that covers rest of the page.
	.tour-active {
		position: relative;
		z-index: 999;
	}
	
	@media screen and (min-width: 2000px) {
		.tour-active {
			box-shadow: 0 0 0 10000px rgba(0, 0, 0, .6);
		}
	}
	
	@media screen and (max-width: 2000px) {
		.tour-active {
			box-shadow: 0 0 0 2500px rgba(0, 0, 0, .6);
		}
	}
	
	@media screen and (max-width: 1000px) {
		.tour-active {
			box-shadow: 0 0 0 1500px rgba(0, 0, 0, .6);
		}
	}
	
	// Set the active element and everything inside to be clickable, as well as the v-tour container.
	.tour-active, .v-tour {
		pointer-events: auto;
	}
*/

Hello, thanks for your code.
I have a problem with "this.tourSteps". I haven't this variable.
Can you help me? Thanks.

For anyone having problems with "this.tourSteps", it was "this.steps" for me.

The gist still works fine, thank you very much for this!