Pular para o conteúdo

Nuxt 4

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

Tutorial por stack

Nuxt 4 usa o Sinapse pelo registry do shadcn-vue

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. 01 Crie o projeto e aplique o tema
  2. 02 Adote o Sinapse num projeto shadcn-vue existente
  3. 03 Adicione componentes Sinapse
  4. 04 Confira o tema no navegador

1 · Projeto novo

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

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 · Projeto existente

Adote o Sinapse num projeto shadcn-vue existente

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

terminal

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 · Componentes

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

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)

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

app/app.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 · Validação

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

pnpm dev

Próximos passos

Continue com a referência certa

Comece por aqui

Escolha entre o registry (shadcn) e a cópia do CSS (Astro/HTML).

Docs shadcn-vue Nuxt

Instalação oficial do módulo Nuxt.

Componentes

Cada página traz o comando do componente.