Primeiros passos

Adicione o Vize ao aplicativo Vue 3 com Vite+. Mantenha as opções das ferramentas em vite.config.ts e o projeto TypeScript em tsconfig.json. O Vize está em desenvolvimento; confira o nível de suporte antes de adotá-lo.

1. Instalar a integração

Em um projeto Vue existente com Vite+ instalado:

vp install -D @vizejs/vite-plugin

A integração usa a versão Vite+ do projeto (0.2.3 ou posterior). Para Vite convencional, veja a migração do plugin; para Nuxt, veja a integração Nuxt.

2. Atualizar vite.config.ts

A função adiciona o compilador do Vize e as tarefas nativas de verificação. Remova a importação do plugin Vue anterior e vue() de plugins; mantenha aliases, servidor, testes e outros plugins. O guia de migração mostra os exemplos completos antes e depois.

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({});

3. Compilar e verificar o aplicativo

vp dev
vp build
vp run check

vp run check combina a verificação de tipos Vue, lint e formatação com Oxlint e Oxfmt. Use tarefas específicas durante o desenvolvimento:

vp run typecheck
vp run lint
vp run fmt:check

Aplique correções com vp run check -- --fix. Use vp run para as tarefas geradas do Vize: vp check, vp lint e vp fmt executam as ferramentas próprias do Vite+. O Vize preserva scripts existentes e gera vize:<nome> em caso de conflito; veja nomes e substituições.

Escolher o próximo passo

• Configurar uma regra ou opção do compilador.
• Migrar ferramentas existentes com exemplos completos antes e depois.
• Entender um diagnóstico lint com exemplos Vue incorretos e corrigidos.
• Explorar os componentes, suas receitas e sua API.
• Visualizar os componentes com Musea.
• Configurar o editor com opções nativas compartilhadas.

Os guias que ainda não foram traduzidos abrem em inglês.

Note

A CLI, a integração Vite e o editor compartilham as opções vue: do vite.config.* e usam o projeto TypeScript e as vueCompilerOptions do tsconfig.json. Arquivos específicos vize.config.* e o objeto vize: no nível superior foram removidos; veja como migrar no guia de configuração.

Usar o Vize sem Vite+

Experimente a CLI sem instalar nada:

vpx vize lint src
vpx vize check
vpx vize fmt --check src

A CLI independente oferece vize lint, vize fmt e vize check. Execute na raiz do pacote de destino e mantenha o projeto TypeScript em tsconfig.json. Os comandos nativos podem compartilhar a seção vue: do vite.config.*; veja a configuração da CLI para a busca e seus limites atuais.

Confira o plano interativo com vpx vize init --dry-run e execute vpx vize init para escolher os recursos. O guia de configuração inicial explica a detecção e os limites de edição. O init usa as opções do projeto e os valores padrão, sem criar uma configuração específica do Vize.