Pular para o conteúdo
Sinapse Sinapse

Vue 3

Tutorial completo para usar Sinapse em Vue 3: projeto, Tailwind v4, tema inline, validação e primeiro botão com shadcn-vue.

Tutorial por stack

Vue usa Sinapse como tema antes do shadcn-vue

Este fluxo segue a ordem natural do desenvolvedor: projeto Vite, Tailwind v4, tema ITpS e só então shadcn-vue para componentes acessíveis.

  1. 01 Crie ou abra um projeto Vue 3 com Vite
  2. 02 Instale Tailwind v4 e configure o Vite plugin
  3. 03 Aplique o tema ITpS com o CLI
  4. 04 Valide os tokens antes da biblioteca
  5. 05 Inicialize shadcn-vue depois do CSS validado
  6. 06 Adicione só o Button e valide no App

1 · Projeto

Crie ou abra um projeto Vue 3 com Vite

Se o projeto já existe, entre nele e siga para o Tailwind. Em projeto novo, comece pelo template Vue + TypeScript para já ter SFC, Vite e TypeScript configurados.

terminal

pnpm create vite@latest meu-app --template vue-ts
cd meu-app
pnpm install

2 · Tailwind v4

Instale Tailwind v4 e configure o Vite plugin

O Sinapse depende de Tailwind v4. No Vite, use o plugin oficial e deixe o alias @ apontando para src, porque shadcn-vue também usa esse alias.

terminal

pnpm add tailwindcss @tailwindcss/vite
pnpm add -D @types/node

vite.config.ts

import path from 'node:path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

tsconfig.app.json (trecho)

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Se o seu tsconfig já tem compilerOptions, adicione apenas baseUrl e paths dentro dele.

3 · CSS Sinapse

Aplique o tema ITpS com o CLI

Rode o CLI ITpS para instalar @itps/styles, escrever o tema inline no CSS global e remover blocos de tema shadcn que sobrescrevem os tokens.

terminal

pnpm dlx github:ITPS/sinapse-ui-cli init

estrutura sugerida

src/
├── main.ts
└── style.css

src/style.css

@import "tailwindcss";

/* itps-theme:start */
/* tema ITpS gerado pela CLI */
/* itps-theme:end */

src/main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

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 antes da biblioteca

Antes de rodar shadcn-vue, confirme que os tokens já aparecem no app. Se o botão aparecer com azul institucional, texto contrastante e radius, a ordem dos imports está correta.

src/App.vue

<script setup lang="ts">
</script>

<template>
  <button
    type="button"
    class="rounded-md bg-primary px-4 py-2 text-primary-foreground"
  >
    Sinapse rodando
  </button>
</template>

5 · Biblioteca

Inicialize shadcn-vue depois do CSS validado

Agora entre com a biblioteca. Escolha a base neutral quando a CLI perguntar por cor; o visual final deve vir dos tokens ITpS já importados.

terminal

pnpm dlx shadcn-vue@latest init

Se 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.

6 · Primeiro componente

Adicione só o Button e valide no App

Comece pelo Button. Depois de adicionar o componente, rode o comando individual da CLI para adicionar as variants itps sem alterar as variants originais do shadcn-vue.

terminal

pnpm dlx shadcn-vue@latest add button
pnpm dlx github:ITPS/sinapse-ui-cli add button

src/App.vue

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<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

Continue com a referência certa

Comece por aqui

Volte ao tutorial dos 3 arquivos e do primeiro botão.

Docs shadcn-vue

Instalação oficial em Vue/Vite.

Button Sinapse

Referência visual do primeiro componente validado.