Driver js on VUE 2 ( "driver.js": "^0.9.8" )

guiderMixin.vue

<script>
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

import { steps } from './steps';

export default {
  computed: {
    driver() {
      return new Driver({
        className: 'driverjs-popover',
        animate: true,
        opacity: 0.75,
        padding: 10,
        allowClose: true,
        overlayClickNext: false,
        doneBtnText: 'Finalizar',
        closeBtnText: 'Fechar',
        nextBtnText: 'Proximo',
        prevBtnText: 'Voltar',
      });
    },
  },
  methods: {
    guide(stepGuideName) {
      if (steps[stepGuideName]) {
        this.driver.defineSteps(steps[stepGuideName]);

        return this.driver.start();
      }

      throw Error('Step Guide not Found');
    },
  },
};
</script>

index.js

import stockPageSteps from './stockPageSteps';

export const steps = {
    useExampleSteps,
}

useExample.vue

<template>
  <button @click.stop="guide('useExampleSteps')"> guide </button>
  <input id="order_fields">
</template>

<script>
import guiderMixin from '@/mixins/guider/guiderMixin';

export default {
  mixins: [guiderMixin],
}
</script>

useExampleSteps.js

const useExampleSteps = [
    {
        element: '#order_fields',
        popover: {
            title: 'Menu Navigation',
            description: 'Click the menu to switch the content of the menu on the right',
            position: 'right',
        },
    },
]

export default useExampleSteps