VueForge

Open source UI components for Vue.js.

Install

npm i @codemonster-ru/vueforge

Peer dependencies:

• vue (v3)
• vue-router (v4)
• @codemonster-ru/vueiconify

Usage

import { createApp } from 'vue';
import { VueForge, DefaultTheme, Button } from '@codemonster-ru/vueforge';
import '@codemonster-ru/vueforge/dist/index.css';

const app = createApp(App);

app.use(VueForge, {
    theme: {
        preset: DefaultTheme,
    },
});

<Button label="Hello" severity="primary" />

Theming

VueForge maps the theme preset to CSS variables. You can override parts of the preset and it will recompute shades for color tokens.

app.use(VueForge, {
    theme: {
        preset: DefaultTheme,
        overrides: {
            colors: {
                green: '#18a66a',
            },
        },
        selector: ':root',
        darkSelector: ':root[data-theme=dark]',
    },
});

You can also update the theme at runtime:

import { setTheme, updateTheme } from '@codemonster-ru/vueforge';

setTheme({ preset: DefaultTheme });
updateTheme({
    overrides: {
        colors: { blue: '#2b6cb0' },
    },
});

Author

@KolesnikovKirill