@public-ui/vue

KoliBri - Vue-Adapter

Motivation

Provide an adapter for Vue to use the KoliBri components.

Installation

You can install the adapter with npm, pnpm or yarn:

npm i @public-ui/vue
pnpm i @public-ui/vue
yarn add @public-ui/vue

Usage

First, initialize KoliBri with a theme and create a Vue app:

import { createApp } from 'vue';
import { DEFAULT } from '@public-ui/theme-default';
import { defineCustomElements } from '@public-ui/components/dist/loader';
import { register } from '@public-ui/components';

register(DEFAULT, defineCustomElements)
	.then(() => {
		createApp(App).mount(htmlDivElement);
	})
	.catch((error) => {
		/* Handle errors */
	});

Then, you can import any component from @public-ui/vue and render it within your Vue application:

<script setup>
import { KolButton } from '@public-ui/vue';
</script>
<template>
        <KolButton _label="Hello World" />
</template>

Find available design tokens in the default theme README.