Vue

Setup

import { createApp } from 'vue';
import ThlUI from '@thl-ui/vue';
import '@thl-ui/styles/thl-ui.css';
import App from './App.vue';

createApp(App)
  .use(ThlUI, {
    locale: 'en',
    theme: 'default',
    persist: true,
    components: { Button: { rounded: true }, Table: { pageSize: 25 } },
  })
  .mount('#app');

The default export registers every component globally (<ThlButton> / <thl-button>). For tree-shaking, install only the config/i18n plugin and import components where you use them:

import { ThlUI } from '@thl-ui/vue';      // plugin without global components
app.use(ThlUI, { locale: 'en' });

<script setup lang="ts">
import { ThlButton } from '@thl-ui/vue';
</script>

Composables

Composable	Returns
useThlConfig()	{ config: Ref<ThlConfig>, set }
useI18n()	{ t, te, n, d, locale, setLocale, intlLocale } — reactive
useToast()	toast manager
useDefaults(name, props)	computed merged defaults
usePrefix()	computed class prefix
useThl()	raw ThlInstance

Templates also get $t and $thl:

<template>
  <h1>{{ $t('menu.dashboard') }}</h1>
  <ThlButton @click="$thl.set({ theme: 'purple-dark' })">Purple</ThlButton>
</template>

v-model

All controls support v-model (modelValue), plus named models where relevant:

<ThlSelect v-model="country" :options="countries" searchable clearable />
<ThlSwitch v-model="on" />
<ThlTabs v-model="tab" :items="items" />
<ThlPagination v-model:page="page" v-model:page-size="size" :total="200" />
<ThlModal v-model:open="open" title="Hello" />
<ThlSteps v-model:current="step" :items="steps" />

Forms & validation

ThlField exposes the generated id through its default slot:

<ThlForm :values="v" @submit="(ok) => ok && save()">
  <ThlField label="Email" name="email" :value="v.email" :rules="[rules.required(), rules.email()]" required v-slot="{ id }">
    <ThlInput :id="id" v-model="v.email" type="email" />
  </ThlField>
  <ThlButton type="submit" variant="primary">Submit</ThlButton>
</ThlForm>

Routing (AppLayout)

Use the #link slot to render router links in the side menu:

<ThlAppLayout :menu="menu" :current-path="route.path" :user="user">
  <template #link="{ item, content, class: cls, current }">
    <RouterLink :to="item.href" :class="cls" :aria-current="current ? 'page' : undefined">
      <component :is="() => content" />
    </RouterLink>
  </template>
  <RouterView />
</ThlAppLayout>

confirm()

import { confirm } from '@thl-ui/vue';
if (await confirm({ icon: 'warning' })) remove();