Instale

terminal

pnpm add @vitral/vue
# npm install @vitral/vue
# yarn add @vitral/vue

Vue 3.5 ou mais recente é a única peer dependency. Os outros pacotes @vitral/* vêm junto.

Registre o plugin

main.ts

import { createApp } from 'vue';
import { Vitral, Prism, ptBR } from '@vitral/vue';
import App from './App.vue';

createApp(App)
    .use(Vitral, {
        theme: {
            preset: Prism,           // Prism, Ink, Avalonia, Simple, or your own
            colorScheme: 'system',   // 'light' | 'dark' | 'system'
            storageKey: 'app-scheme' // remember the reader's choice
        },
        locale: ptBR,
        inputVariant: 'outlined',    // every field, unless it says otherwise
        cssLayer: 'vitral'           // wrap component CSS in @layer
    })
    .mount('#app');

Não há folha de estilos para importar. O plugin injeta o tema como variáveis CSS, e cada componente injeta o próprio CSS na primeira vez que renderiza, então uma página só carrega os componentes que usa.

Opções

Opção	Tipo	Descrição
theme	{ preset, colorScheme, storageKey, options } \| 'none'	O preset e o esquema de cores. `'none'` não injeta nada: traga as suas próprias variáveis, ou use o modo sem estilo.
locale	Locale	`en` e `ptBR` vêm prontos; um locale é um objeto simples, então um terceiro é só um literal.
inputVariant	'outlined' \| 'filled'	A aparência padrão de todos os campos. Reativo: mude em tempo de execução e a página acompanha.
unstyled	boolean	Remove todas as classes embutidas, em toda parte. Veja o modo sem estilo.
pt	GlobalPassThrough	Pass-through para todas as instâncias de um componente, pelo nome. Veja pass-through.
cssLayer	string \| false	Envolve o CSS dos componentes em `@layer`, para que o CSS da aplicação vença sem `!important`.
zIndex	Partial<ZIndexConfig>	Os patamares de empilhamento de modais, overlays, menus e tooltips.
csp	{ nonce?: string }	O nonce colocado em cada `<style>` injetado, para uma Content-Security-Policy estrita.

Sem linhas de import

No Nuxt, o módulo faz isso por você. Numa aplicação Vite comum, as mesmas listas ficam em @vitral/vue/resolver, para o unplugin-vue-components e o unplugin-auto-import:

vite.config.ts

import Components from 'unplugin-vue-components/vite';
import AutoImport from 'unplugin-auto-import/vite';
import { VitralResolver, vitralAutoImports } from '@vitral/vue/resolver';

export default defineConfig({
    plugins: [
        vue(),
        Components({ resolvers: [VitralResolver()] }),        // <Button>, v-tooltip
        AutoImport({ imports: [vitralAutoImports()] })        // useTheme(), Form
    ]
});

VitralResolver({ prefix: 'Vt' }) responde a <VtButton>, e deixa todos os outros nomes para os seus próprios componentes.

Dois componentes na raiz

useToast() e useConfirm() emitem eventos, então os componentes que os exibem precisam estar na página. Coloque-os uma vez, perto da raiz, onde sobrevivem às views que os chamam.

App.vue

<script setup lang="ts">
import { Toast, ConfirmDialog } from '@vitral/vue';
</script>

<template>
    <RouterView />
    <Toast />
    <ConfirmDialog />
</template>

Sem JavaScript

Uma página que só quer a aparência pode levar o tema compilado e o CSS dos componentes em dois arquivos.

index.html

<link rel="stylesheet" href="/node_modules/@vitral/themes/css/prism.css" />
<link rel="stylesheet" href="/node_modules/@vitral/styles/vitral.css" />

Trabalhando no próprio Vitral