Nuxt UI: ligar a biblioteca de componentes na v4 e fazer um Agent trabalhar segundo AGENTS.md

Para quem

Se está a fazer uma interface Nuxt e quer UI Vue pronta, em vez de montar componentes acessíveis do zero, este repositório encaixa melhor. Junta Reka UI, Tailwind CSS e Tailwind Variants para interfaces complexas, acessíveis e de alto desempenho. Os upstreams relacionados são

https://reka-ui.com/

https://tailwindcss.com/

https://www.tailwind-variants.org/

Precisa de um projeto Nuxt que possa alterar nuxt.config e aceita instalar dependências com pnpm. Quem só quer que um agente de código ajude a alterar componentes, temas ou testes deve ler primeiro o AGENTS.md do repositório. Não escreve um produto Agent concreto como único alvo suportado; só diz que será apanhado automaticamente por all AI coding agents.

Conclua a primeira tentativa em 3 minutos

O comando oficial de instalação está na página como este:

pnpm add @nuxt/ui tailwindcss

Isto altera dependências do projeto; não é uma vista só de leitura. Confirme primeiro que o diretório atual é a sua aplicação Nuxt e que esta máquina tem pnpm, depois execute. Depois de instalar, escreva o módulo na configuração. O excerto dá:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

Exige que exista a entrada CSS ~/assets/css/main.css, mas não escreve o conteúdo desse ficheiro. Não invente @import nem o uso de componentes. Sinal de sucesso: a dependência está instalada, modules mostra @nuxt/ui e a aplicação arranca como já o faz sem erro por faltar este módulo. Se o Agent começar a acrescentar exemplos de botões que não aparecem no excerto ou a alterar tokens de tema, pare primeiro.

Conferência de menor risco: abra

https://github.com/nuxt/ui/blob/v4/AGENTS.md

Faça o Agent explicar só a estrutura de componentes ou as convenções de tema, sem ainda alterar ficheiros.

Casos de uso

Caso 1: Ligar v4 numa aplicação Nuxt. Instale @nuxt/ui e tailwindcss com o comando pnpm acima, depois registe o módulo @nuxt/ui e aponte para ~/assets/css/main.css. A página não escreve equivalentes npm/yarn nem como importar o primeiro componente num ficheiro único Vue. Por isso só pode confirmar estes dois passos: dependência e registo do módulo. O que escrever no ficheiro CSS e que componente pôr numa página ficam fora deste excerto; tem de consultar docs ou código-fonte locais que já tenha, e não fingir que este texto já os deu.

Caso 2: Fazer um agente de código trabalhar segundo as regras do repositório. AGENTS.md dá guia de contribuição a assistentes de IA, cobre estrutura de componentes, padrões de tema, convenções de teste e indicações de docs, e é apanhado automaticamente. A tarefa deve ser uma comparação só de leitura, por exemplo «segundo AGENTS.md, ver se a estrutura/tema/testes deste componente se desviam». Não escreve comandos de teste concretos nem como publicar um sítio de docs. Por isso na primeira vez não deixe o Agent reescrever docs em lote nem acrescentar ficheiros de teste; primeiro faça-o apontar os parágrafos de apoio e os caminhos que alteraria.

Limites de uso

O que está a ver agora é o ramo v4. Nuxt UI v3 está em

https://github.com/nuxt/ui/tree/v3

v2 em

https://github.com/nuxt/ui/tree/v2

Não aplique à v4 nomes de módulo, diretórios ou escrita de tema de ramos antigos. A página não escreve uma tabela de migração de v4 para v3.

O caminho de instalação é pnpm add @nuxt/ui tailwindcss. Não ponha ao lado outro comando de gestor de pacotes. Reka UI e Tailwind Variants estão escritos como fontes de capacidade, não como segundo instalador.

Na primeira vez, pare em instalar dependências, registar o módulo ou só ler AGENTS.md. Qualquer alteração de código-fonte de componentes, testes acrescentados, tema ou reescrita da entrada CSS deve primeiro fazer o Agent repetir os ficheiros que vai alterar; você confirma e depois continua.