1) Composition API, Script Setup e TypeScript: a DX na prática

Desde a adoção do Vue 3, a Composition API consolidou padrões de composeabilidade que permitem código mais modular, reutilizável e testável. O Script Setup simplifica a escrita de componentes, remove boilerplate e facilita a tipagem com TypeScript.

Práticas recomendadas:

• Preferir setup puro com props definidas por defineProps e eventos com defineEmits.
• Organizar lógica reativa em funções composition-friendly, mantendo footprint mínimo de reatividade.
• Tipar props, events e refs para garantir DX no compile-time.

// Exemplo simples de componente com Script Setup e TypeScript
<script setup lang="ts">
import { defineProps, defineEmits, ref } from 'vue';

type Props = {
  title: string;
  initial: number;
};

const props = defineProps<Props>();
const emit = defineEmits<{ (e: 'increment', value: number): void }>>();

const count = ref<number>(props.initial);

function inc() {
  count.value++;
  emit('increment', count.value);
}
</script>

<template>
  <div class="card" aria-label="Componente de contador">
    <h3>{{ props.title }}</h3>
    <p>Contador: {{ count }}</p>
    <button @click="inc">Incrementar</button>
  </div>
</template>

Observação: com Script Setup, o código se aproxima de uma abordagem de Composition API “declarativa”, melhorando a leitura e a reusabilidade entre componentes.

2) Vite: build ultrarrápido, dev quente e ecossistema em expansão

Vite tornou o desenvolvimento Vue mais ágil por meio de HMR instantâneo, carregamento de módulos no navegador e uma base de plugins que evolui rapidamente. O ecossistema está cada vez mais sólido com plugins oficiais e de terceiros para Tailwind, Vitest, PWA e asset hashing.

Boas práticas:

• Configurar caminhos e alias com tsconfig.json e vite.config.ts para DX de imports.
• Usar importações automáticas de componentes com plugins de integração Vue, mantendo o código limpo.
• Aproveitar Vitest para testes de unidade e testes de integração alinhados com a RD.

// Exemplo mínimo de vite.config.ts para Vue 3
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

3) Pinia: estado previsível e escalável para Vue 3

Pinia consolidou-se como a solução de state management recomendada para Vue 3. Sua API baseada em stores por defineStore facilita tipagem com TypeScript, middlewares simples e uma mentalidade modular para grandes aplicações.

Práticas comuns:

• Organizar stores por domínio, em vez de monólitos gigantes.
• Usar getters para derivação de estado sem recomputação desnecessária.
• Exportar types e interfaces para contratos entre stores e componentes.

// Exemplo de store Pinia com TypeScript
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    double: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++;
    }
  }
});

4) SSR, SSG e o ecossistema moderno: Nuxt, Vue Router e performance

A tendência é adotar SSR/SSG para performance, SEO e experiência de primeira carga. Nuxt 3 e Vue Router evoluíram para oferecer migração suave, com suporte a módulos e middleware. A ideia é combinar rendering no servidor com hydratação eficiente no cliente.

Boas práticas:

• Escolha entre SSR, SSG ou híbrido conforme o caso de uso.
• Utilize suspense para renderização assíncrona e fallback adequado.
• Aplique caching e streaming de HTML quando disponível.

// Exemplo com Suspense e fallback
<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Carregando...</div>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() => import('./SomeHeavyComponent.vue'));
</script>