npm package: @govbr-ds/webcomponents-vue
Description: Wrapper Vue para a biblioteca de Web Components do GovBR-DS.
Author: SERPRO
Latest version: 2.0.0-next.66

# Vue – @govbr-ds/webcomponents-vue

[![npm (next)](https://img.shields.io/npm/v/@govbr-ds/webcomponents-vue/next.svg)](https://www.npmjs.com/package/@govbr-ds/webcomponents-vue)

Este wrapper Vue encapsula os [Web Components GovBR-DS](https://gov.br/ds/webcomponents), 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](https://stenciljs.com/docs/vue).

## Instalação 📦

```bash
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:

```properties
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:

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

### Configuração do template (Vite)

```ts
// 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

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

Uso com `v-model`:

```vue
<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

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

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

### Scripts/Build

```bash
nx build webcomponents
nx build vue
```

**Gerenciar baseline de tamanho:**

```bash
# 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](https://gov.br/ds/wiki/desenvolvimento/web-components)
- MDN Web Components: [developer.mozilla.org/Web_Components](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components)

## Contribuindo 🤝

- Padrões e boas práticas: [gov.br/ds/wiki](https://gov.br/ds/wiki/)
- Como contribuir: [contribuindo com o DS](https://gov.br/ds/wiki/comunidade/contribuindo-com-o-ds/)

## Reportar Bugs/Problemas 🐛

Abra uma issue: [gitlab.com/.../issues/new](https://gitlab.com/govbr-ds/bibliotecas/wbc/govbr-ds-wbc/-/issues/new)

## Commits 📝

Padrões de branches e commits: [gov.br/ds/wiki](https://gov.br/ds/wiki/)

## Precisa de ajuda? 🆘

- Site: [gov.br/ds](http://gov.br/ds)
- Web Components: [gov.br/ds/webcomponents](https://gov.br/ds/webcomponents)
- Discord: [discord.gg/U5GwPfqhUP](https://discord.gg/U5GwPfqhUP)

## Créditos 🎉

Desenvolvido pelo [SERPRO](https://www.serpro.gov.br/) com a comunidade.