@vitral/vue

@vitral/vue

Vitral for Vue 3: the components, the composables, the directives and the plugin that themes them.

Vitral is a component library built around a token engine, so the whole look comes from one object you can swap. Design tokens, presets, light and dark, per instance overrides, pass-through attributes and a fully unstyled mode.

Every box that scrolls inside a component (a ScrollPanel, a Sidebar's menu, a Select's list, a Dialog's body, a DataGrid) wears the theme's drawn scrollbars over native scrolling. The plugin's scrollbar option — 'hover' (the default), 'always' or 'native' — sets them for all, each component's scrollbar prop for itself, and v-scrollbar puts them on a box of your own. scrollbarArrows: true gives every bar arrows at its ends, as a native bar has.

Documentation and live examples

pnpm add @vitral/vue

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

createApp(App).use(Vitral, { theme: { preset: Prism, colorScheme: 'system' } }).mount('#app');

<script setup lang="ts">
import { Button, InputText } from '@vitral/vue';
import { ref } from 'vue';

const name = ref('');
</script>

<template>
    <InputText v-model="name" clearable />
    <Button label="Save" icon="check" />
</template>

There is no stylesheet to import. The plugin injects the theme as CSS variables, and each component injects its own CSS the first time it renders.

Vue 3.5 or newer is the only peer dependency. On Nuxt, use @vitral/nuxt instead of calling the plugin by hand.

LGPL-3.0-or-later. Part of the Vitral monorepo.