How can i change the buttons text and/or language?

[pulsardev]

How can i change the buttons text and/or language?

[mmorainville]

Hi @fernandofloresg,

To change the language of the buttons you can override the actions slot of the v-step component.
The documentation is still a work-in-progress but you can find more information on this page:
https://pulsar.gitbooks.io/vue-tour/customizing-the-template.html

Basically at the moment if you want to customize the template of the steps, you have to iterate over the steps in your v-tour component. If you use vue-i18n to translate your app, you'll have to do something like this:

<v-tour name="myTour" :steps="steps">
  <template slot-scope="tour">
    <transition name="fade">
      <v-step v-if="tour.currentStep === index" v-for="(step, index) of tour.steps" :key="index" :step="step" :previous-step="tour.previousStep" :next-step="tour.nextStep" :stop="tour.stop" :isFirst="tour.isFirst" :isLast="tour.isLast">
        <template>
          <div slot="actions">
            <button @click="tour.stop" v-if="!tour.isLast" class="v-step__button">{{ $t("skipTour") }}</button>
            <button @click="tour.previousStep" v-if="!tour.isFirst" class="v-step__button">{{ $t("previous") }}</button>
            <button @click="tour.nextStep" v-if="!tour.isLast" class="v-step__button">{{ $t("next") }}</button>
            <button @click="tour.stop" v-if="tour.isLast" class="v-step__button">{{ $t("finish") }}</button>
          </div>
        </template>
      </v-step>
    </transition>
  </template>
</v-tour>

I know it requires to add a lot of boilerplate if you want to customize your tour, but for now it's the better solution we found to provide a full control over the templates of the steps. We plan to make the customization simpler in later releases, at least for translation purposes.

Hope I've been able to help you!

[fernandofloresg]

Thanks, keep up the good work ! 👍

[quroom]

If you guys change locale in realtime, use computed property for labels.
If using labels in data, it's not responsible in realtime.

[nattyluke]

The code you posted throws a lot of errors in my code like:
TypeError: "_vm.labels is undefined; can't access its "buttonSkip" property"
and
TypeError: "popper is undefined; can't access its "setAttribute" property"

Can you post a minimum example?

[mmorainville]

Hi @nattyluke,

You can check my answer here: #53 (comment)

It's our mistake, we forgot to update this part of the doc for the v1.1.0.

[JoedsonGabriel]

See this example to change the button steps description.

[deepaksisodiya]

labels: {
    buttonSkip: i18n.tc("SKIP"),
    buttonPrevious: i18n.tc("PREVIOUS"),
    buttonNext: i18n.tc("NEXT"),
    buttonStop: i18n.tc("FINISH"),
  },

[wladston]

I did as @quroom suggested, and it works!