# Nuxt 4

Tutorial para usar o Sinapse DS em Nuxt 4 pelo registry do shadcn-vue: projeto novo, projeto existente e componentes.

O registry Sinapse entrega tema e componentes pelo CLI do shadcn-vue. As URLs do registry Vue funcionam sem configuração; o namespace @sinapse é opcional.

## 1. Crie o projeto e aplique o tema

O init do shadcn-vue cria o app Nuxt 4 com Tailwind v4 e ícones Tabler. Em seguida, aplique o tema Sinapse.

`terminal`

```bash
pnpm dlx shadcn-vue@latest init -t nuxt -n meu-app --base reka --style nova --icon-library tabler --font inter -b neutral
cd meu-app
pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/theme.json
```

O init instala o template Nuxt com npm. O npm 10, que vem com a Node 22, falha nesse passo (Cannot read properties of null (reading 'edgesOut')); atualize antes com npm install -g npm@11. Com pnpm 10 ou mais recente, aprove os builds de esbuild e vue-demi (pnpm approve-builds) se o comando parar pedindo aprovação. Use TypeScript 6: o compilador de componentes do Vue ainda não suporta TypeScript 7.

## 2. Adote o Sinapse num projeto shadcn-vue existente

Aplique o tema Sinapse no projeto que já usa shadcn-vue.

`terminal`

```bash
pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/theme.json
```

O tema substitui os tokens do shadcn (cores, radius, fontes) pelos do Sinapse. Variáveis, utilitários e regras próprias do projeto continuam no CSS.

## 3. Adicione componentes Sinapse

Cada comando instala o componente da sua stack com o tema Sinapse e, quando necessário, o Button Sinapse. Para usar nomes curtos (@sinapse/button), registre o namespace no components.json.

`terminal`

```bash
pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/button.json https://dsystem.sinapse.org.br/r/vue/modal.json
```

`components.json (opcional)`

```json
{
  "registries": {"@sinapse":"https://dsystem.sinapse.org.br/r/vue/{name}.json"}
}
```

`app/app.vue`

```vue
<script setup lang="ts">
import { IconPlus } from '@tabler/icons-vue'
import { Button } from '@/components/ui/button'
</script>

<template>
  <main class="flex gap-3 p-8">
    <Button>
      <IconPlus />
      Salvar
    </Button>
    <Button variant="secondary">Editar</Button>
    <Button variant="outline">Revisar</Button>
  </main>
</template>
```

O Button Sinapse já vem no projeto novo (base.json) e no passo 2 do projeto existente. Depois disso, se o CLI perguntar se deve sobrescrever o Button ao adicionar outro componente, responda N (sem terminal interativo, o CLI já pula o arquivo).

## 4. Confira o tema no navegador

Rode o servidor de desenvolvimento e abra a página inicial. O botão padrão aparece contornado em coral com texto em azul institucional; com a classe .dark no <html>, os tokens mudam para o modo escuro.

`terminal`

```bash
pnpm dev
```

## Próximos passos

- [Comece por aqui](/comecar): Escolha entre o registry (shadcn) e a cópia do CSS (Astro/HTML).
- [Docs shadcn-vue Nuxt](https://www.shadcn-vue.com/docs/installation/nuxt): Instalação oficial do módulo Nuxt.
- [Componentes](/componentes): Cada página traz o comando do componente.