Vue

Thiết lập

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

createApp(App).use(ThlUI, { locale: 'vi', persist: true, components: { Button: { rounded: true } } }).mount('#app');

Export mặc định đăng ký toàn bộ component (<ThlButton> / <thl-button>). Muốn tree-shake: dùng import { ThlUI } from '@thl-ui/vue' (chỉ cấu hình + i18n) và import từng component.

Composables

Composable	Trả về
useThlConfig()	{ config: Ref<ThlConfig>, set }
useI18n()	{ t, te, n, d, locale, setLocale } — reactive
useToast()	quản lý toast
useDefaults(name, props)	computed giá trị mặc định đã gộp

Template có sẵn $t và $thl.

v-model

<ThlSelect v-model="country" :options="countries" searchable clearable />
<ThlTabs v-model="tab" :items="items" />
<ThlPagination v-model:page="page" v-model:page-size="size" :total="200" />
<ThlModal v-model:open="open" title="Xin chào" />

Form & validation

<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" />
  </ThlField>
</ThlForm>

Router

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