Nuxt 4
Tutorial completo para usar Sinapse em Nuxt 4: projeto, Tailwind v4, tema inline, validação e primeiro botão com shadcn-vue.
Tutorial por stack
Nuxt usa Sinapse como tema antes do shadcn-nuxt
Este fluxo separa a base visual do motor de componentes: primeiro Tailwind v4 e tema inline gerado pela CLI, depois shadcn-nuxt para auto-import e comportamento.
- 01 Crie ou abra um projeto Nuxt 4
- 02 Instale Tailwind v4 no Vite do Nuxt
- 03 Aplique o tema ITpS com o CLI
- 04 Valide os tokens em uma página Nuxt
- 05 Adicione shadcn-nuxt e inicialize shadcn-vue
- 06 Adicione só o Button e valide no Nuxt
1 · Projeto
Crie ou abra um projeto Nuxt 4
Se o projeto já existe, entre nele. Em projeto novo, crie com o starter atual do Nuxt e siga com pnpm.
terminal
pnpm create nuxt@latest meu-app
cd meu-app
pnpm install2 · Tailwind v4
Instale Tailwind v4 no Vite do Nuxt
O Sinapse precisa do Tailwind v4. No Nuxt, registre o CSS global e adicione o plugin @tailwindcss/vite dentro de vite.plugins.
terminal
pnpm add tailwindcss @tailwindcss/vitenuxt.config.ts
import tailwindcss from '@tailwindcss/vite'
export default defineNuxtConfig({
css: ['~/assets/css/main.css'],
vite: {
plugins: [tailwindcss()],
},
})Se o seu nuxt.config.ts já tem modules, appConfig ou outras chaves, preserve tudo e adicione apenas css e vite.plugins.
3 · CSS Sinapse
Aplique o tema ITpS com o CLI
No Nuxt 4, mantenha o CSS principal em app/assets/css/main.css. Rode o CLI ITpS para instalar @itps/styles, escrever o tema inline e remover blocos shadcn que sobrescrevem os tokens.
terminal
pnpm dlx github:ITPS/sinapse-ui-cli initestrutura sugerida
app/
└── assets/
└── css/
└── main.cssapp/assets/css/main.css
@import "tailwindcss";
/* itps-theme:start */
/* tema ITpS gerado pela CLI */
/* itps-theme:end */Enquanto os pacotes forem usados por tarball, rode pnpm --package=./itps-cli-0.3.0.tgz dlx itps init --package ./itps-styles-0.3.0.tgz.
4 · Validação Sinapse
Valide os tokens em uma página Nuxt
Antes de instalar shadcn-nuxt, confirme que o Nuxt está carregando o tema. Se este botão aparecer com azul institucional, texto contrastante e radius, os tokens ITpS estão disponíveis.
app/pages/index.vue
<template>
<button
type="button"
class="rounded-md bg-primary px-4 py-2 text-primary-foreground"
>
Sinapse rodando
</button>
</template>5 · Biblioteca
Adicione shadcn-nuxt e inicialize shadcn-vue
Use shadcn-nuxt para integração com auto-import do Nuxt e depois rode o init do shadcn-vue. Quando a CLI pedir a cor base, mantenha neutral.
terminal
pnpm dlx nuxi@latest module add shadcn-nuxtnuxt.config.ts (trecho)
export default defineNuxtConfig({
modules: ['shadcn-nuxt'],
shadcn: {
prefix: '',
componentDir: './components/ui',
},
})terminal
pnpm dlx nuxi prepareterminal
pnpm dlx shadcn-vue@latest initSe o init do shadcn-vue recriar blocos :root/.dark/@theme no CSS, rode pnpm dlx github:ITPS/sinapse-ui-cli init novamente para limpar e reaplicar o tema ITpS. Alguns componentes do shadcn-vue usam VueUse em SSR; o plugin de ssrWidth abaixo evita hidratação inconsistente em componentes responsivos.
6 · Primeiro componente
Adicione só o Button e valide no Nuxt
Nuxt auto-importa o componente quando shadcn-nuxt está configurado. Depois de adicionar o Button, rode o comando individual da CLI para adicionar as variants itps sem alterar as variants originais do shadcn-vue.
app/plugins/ssr-width.ts
import { provideSSRWidth } from '@vueuse/core'
export default defineNuxtPlugin((nuxtApp) => {
provideSSRWidth(1024, nuxtApp.vueApp)
})terminal
pnpm dlx shadcn-vue@latest add button
pnpm dlx github:ITPS/sinapse-ui-cli add buttonapp/pages/index.vue
<template>
<Button variant="itps">Sinapse rodando</Button>
</template>O comando add é por componente: pnpm dlx github:ITPS/sinapse-ui-cli add button adapta só o Button. Ele não instala todos os componentes; para outros componentes documentados, use pnpm dlx github:ITPS/sinapse-ui-cli add <nome>. Quando não houver adapter de patch, o comando confirma o contrato theme-only sem alterar arquivos.
Próximos passos