Clean Code

Umas das características que eu mais gosto no Vuetify é a sintaxe dos seus componentes. É uma sintaxe que proporciona templates HTML menores e com um código mais simples.

Para quem gosta de Clean Code, Vuetify é uma ótima opção. Eu gosto muito de Clean Code e procuro sempre utilizar linguagens e frameworks que me proporcionem código simples e de fácil entendimento.

Se você quer saber mais sobre Clean Code, recomendo ler este artigo.

Poderia Melhorar

No componente DataTable percebi que algo poderia melhorar. O problema estava na declaração do parâmetro "headers" que exigia um objeto contendo todas as propriedades necessárias para montar o cabeçalho das tabelas.

Na documentação do Vuetify, esse objeto normalmente é declarado dentro da sessão Script. A seguir alguns exemplos.

Exemplo com a versão 1.5 do Vuetify:

<template>
  <v-data-table :headers="headers" :items="desserts">
    <template v-slot:items="{ item }">
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
    </template>
  </v-data-table>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    headers: [
      {
        text: 'Name',
        value: 'name',
        align: 'left',
        sortable: false,
      },
      {
        text: 'Price',
        value: 'price',
        align: 'left',
        sortable: false,
      },
    ],
    desserts: [
      { name: 'Blueberry Tart', price: 10 },
      { name: 'Coconut Macaroons', price: 20 },
      { name: 'Chewy Spice Cookies', price: 30 },
    ],
  }),
};
</script>

Veja o mesmo exemplo na versão 2 do Vuetify:

<template>
  <v-data-table :headers="headers" :items="desserts"></v-data-table>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    headers: [
      {
        text: 'Name',
        value: 'name',
        align: 'left',
        sortable: false,
      },
      {
        text: 'Price',
        value: 'price',
        align: 'left',
        sortable: false,
      },
    ],
    desserts: [
      { name: 'Blueberry Tart', price: 10 },
      { name: 'Coconut Macaroons', price: 20 },
      { name: 'Chewy Spice Cookies', price: 30 },
    ],
  }),
};
</script>

Só neste simples exemplo, a declaração do objeto "headers" possui 14 linhas de código. Em tabelas mais complexas este número pode aumentar consideravelmente (experiência própria).

Resolvendo o Problema com Plugin para Vue.js

Uma das funcionalidades mais poderosas do Vue.js é a possibilidade de criar plugins e disponibilizar facilitadores em todas as partes do aplicativo. Se quer saber todos os detalhes de como criar plugins para Vue.js, acesse a documentação completa neste link.

No exemplo em questão, eu criei um plugin para gerar o objeto "headers", porém com um código mais simples. O código do plugin ficou da seguinte maneira:

import Vue from 'vue';

const dataTableHeaders = {
  install(Vue, options) {
    // $dth = DataTableHeaders
    Vue.prototype.$dth = (...headers) => {
      let tableHeaders = [];
      for (let h of headers) {
        tableHeaders.push({
          text: typeof h == 'string' ? h : h['text'] || h[0],
          value: typeof h == 'string' ? h.toLocaleLowerCase() : h['value'] || h[1],
          align: (typeof h == 'string' ? undefined : h['align'] || h[2]) || 'left',
          sortable: (typeof h == 'string' ? undefined : h['sortable'] || h[3]) || false,
          class: typeof h == 'string' ? undefined : h['class'] || h[4],
          width: typeof h == 'string' ? undefined : h['width'] || h[5],
        });
      }
      return tableHeaders;
    };
  },
};

Vue.use(dataTableHeaders);

Utilizando este plugin, o exemplo anterior pode ser reescrito desta forma (versão 1.5 do Vuetify):

<template>
  <v-data-table :headers="$dth('Name', 'Price')" :items="desserts">
    <template v-slot:items="{ item }">
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
    </template>
  </v-data-table>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    desserts: [
      { name: 'Blueberry Tart', price: 10 },
      { name: 'Coconut Macaroons', price: 20 },
      { name: 'Chewy Spice Cookies', price: 30 },
    ],
  }),
};
</script>

Veja o mesmo exemplo na versão 2 do Vuetify:

<template>
  <v-data-table :headers="$dth('Name', 'Price')" :items="desserts"></v-data-table>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    desserts: [
      { name: 'Blueberry Tart', price: 10 },
      { name: 'Coconut Macaroons', price: 20 },
      { name: 'Chewy Spice Cookies', price: 30 },
    ],
  }),
};
</script>

Visivelmente o código menor e mais limpo. Eu utilizo bastante este tipo técnica e venho obtendo resultados satisfatórios.

Dúvidas ou sugestões é só entrar em contato. Abraço.