Usando o shepherdjs para fazer tours em uma aplicação nuxt (vue.js) (Parte 2)
Tags: shepherdj, nuxt, vue, portuguese
Published: 2022-08-07 22:38:00

Dando continuidade ao tutorial, [aqui](https://dev.to/cesarbhering/usando-o-shepherdjs-para-fazer-tours-em-sua-aplicacao-nuxt-vuejs-parte-1-4894) você encontra a primeira parte, vamos alterar mais alguns comportamentos do nosso projeto e [aqui ](https://github.com/cesarbhering/TutorialShepherd)você encontra o repositório.

Para diminuir a largura do elemento do shepherd, iremos adicionar a classe `width-limit`, conforme código abaixo. Você pode declarar uma série de classes para que sejam aplicadas no elemento do shepherd. Por hora iremos aplicar apenas uma classe. É necessário retirar o `scoped` da declaração de style, então tenha muito cuidado.

Também vamos alterar a opção `on` dentro de `attachTo`, que escolhe o posicionamento da flecha/elemento shepherd, vamos trocar de 'top' para 'right-end'.

```
mounted() {
    this.$nextTick(() => {
      const tour = this.$shepherd({
        useModalOverlay: true,
        defaultStepOptions: {
          popperOptions: {
            modifiers: [{ name: 'offset', options: { offset: [0,50] } }]
          }
        }
      });

      tour.addStep({
        classes: 'width-limit',
        attachTo: { element: '#shepherd-teste', on: 'right-end' },
        text: 'Test'
      });

      tour.start();
      });
    }
```
 E a declaração em style

```
.width-limit {
  max-width: 200px;
}
```
E assim ficou o nosso elemento, menor e renderizado a direita.

![Mostra o elemento shepherd menor e renderizado a direita](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ay1vpkixmr226fqq5chb.PNG)

Você deve ter notado que com a mudança de lugar, a seta que aponta para o elemento a ser destacado ficou "fora do esquadro" e isso incomoda um pouco. Para corrigir este tipo de situação usamos o modificador do popper chamado 'arrow', assim a opção `popperOptions` fica da seguinte forma:

```
popperOptions: {
  modifiers: [{ name: 'offset', options: { offset: [0, 50] } }, 
              { name: 'arrow', options: { padding: 20 } }]
}
```
 E o elemento fica desta forma (bem mais apresentável), com a seta deslocada mais ao centro e o elemento no mesmo lugar. Usei o valor 20 pois é o que faz sentido para o exemplo, mas você pode testar com valores positivos e negativos.

![Elemento shepherd com a flecha/arrow em posição alterada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcpnvmjr9gbrl168srpx.png)
 
Para deixar o elemento mais completo, podemos adicionar um título, e adicionar um botão de cancelamento do tutorial. As opções utilizadas serão `cancelIcon` e `title`. Importante notar que a opção `cancelIcon` se trata de um objeto com a propriedade `enabled` que é um valor booleano.

O visual e o código ficam da seguinte maneira:

![Elemento shepherd com título](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6nm5yl04jgzr2kdifqt.png)

```
this.$shepherd({
          useModalOverlay: true,
          defaultStepOptions: {
            cancelIcon: {enabled: true},
            popperOptions: {
              modifiers: [{ name: 'offset', options: { offset: [0, 50] } }, 
              { name: 'arrow', options: { padding: 20 } }]
            }
         }
});

tour.addStep({
  classes: 'width-limit',
  attachTo: { element: '#shepherd-teste', on: 'right-end' },
  title: 'Test Title',
  text: 'Test'
});
```

---

Continua em breve...