Vue – @govbr-ds/webcomponents-vue

Este wrapper Vue encapsula os Web Components GovBR-DS, permitindo que sejam utilizados como componentes nativos no Vue.

Por que usar este wrapper? 🤔

• Verificação de tipos.
• Integração com Vue Router.
• Suporte a v-model para componentes de formulário.

Mais detalhes na documentação do Stencil.

Instalação 📦

npm install @govbr-ds/core @govbr-ds/webcomponents @govbr-ds/webcomponents-vue
# ou
pnpm add @govbr-ds/core @govbr-ds/webcomponents @govbr-ds/webcomponents-vue
# ou
yarn add @govbr-ds/core @govbr-ds/webcomponents @govbr-ds/webcomponents-vue

Nota importante: pnpm e tree-shaking

Se ao consumir estes pacotes você notar que o bundler não está removendo código não utilizado (tree‑shaking), pode haver uma incompatibilidade com o layout padrão do pnpm.

Solução rápida (opcional, somente se precisar): crie um arquivo .npmrc na raiz do seu projeto com:

node-linker=hoisted

Por que isso ajuda: por padrão, o pnpm organiza as dependências em pastas isoladas com symlinks. Alguns bundlers/otimizadores se baseiam na estrutura de node_modules e no campo sideEffects para decidir o que pode ser eliminado. O layout hoisted aproxima o formato “achatado” (similar ao npm/yarn), facilitando essa análise e, em muitos casos, restaurando o tree‑shaking.

Observações:

• Use apenas se o tree‑shaking realmente não estiver funcionando.
• Pode aumentar o uso de disco e alterar a resolução de dependências do seu projeto.

Uso 📚

Fontes e ícones

No stylesheet global do app:

@import '~@govbr-ds/core/dist/core-tokens.min.css';

Configuração do template (Vite)

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('br-'),
        },
      },
    }),
  ],
})

Uso com componentes

import { BrButton } from '@govbr-ds/webcomponents-vue'

Uso com v-model:

<script setup lang="ts">
import { ref } from 'vue'
const name = ref('Lorem ipsum')
</script>

<template>
  <h1>Olá {{ name }}</h1>
  <br-input name="name" placeholder="Seu nome" v-model="name" />
</template>

Desenvolvimento 👨‍💻

Estrutura do projeto

├── 📁 src
│   ├── 📁 stencil-generated
│   └── 📄 index.ts

[!WARNING] Tudo dentro de stencil-generated é sobrescrito ao gerar o build de Web Components.

Scripts/Build

nx build webcomponents
nx build vue

Gerenciar baseline de tamanho:

# Da raiz do monorepo:
pnpm run baseline:update:vue    # Atualizar baseline
pnpm run baseline:compare:vue   # Comparar com baseline atual

Documentações Complementares 📖

• Wiki: gov.br/ds/wiki/desenvolvimento/web-components
• MDN Web Components: developer.mozilla.org/Web_Components

Contribuindo 🤝

• Padrões e boas práticas: gov.br/ds/wiki
• Como contribuir: contribuindo com o DS

Reportar Bugs/Problemas 🐛

Abra uma issue: gitlab.com/.../issues/new

Commits 📝

Padrões de branches e commits: gov.br/ds/wiki

Precisa de ajuda? 🆘

• Site: gov.br/ds
• Web Components: gov.br/ds/webcomponents
• Discord: discord.gg/U5GwPfqhUP

Créditos 🎉

Desenvolvido pelo SERPRO com a comunidade.