Vue

セットアップ

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: 'ja',
    theme: 'default',
    persist: true,
    components: { Button: { rounded: true }, Table: { pageSize: 25 } },
  })
  .mount('#app');

デフォルトエクスポートはすべてのコンポーネントをグローバルに登録します（<ThlButton> / <thl-button>）。tree-shaking を効かせるには、設定 / i18n のプラグインだけをインストールし、コンポーネントは使う場所で import します。

import { ThlUI } from '@thl-ui/vue';      // グローバルコンポーネントなしのプラグイン
app.use(ThlUI, { locale: 'ja' });

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

Composables

Composable	戻り値
useThlConfig()	{ config: Ref<ThlConfig>, set }
useI18n()	{ t, te, n, d, locale, setLocale, intlLocale } — リアクティブ
useToast()	トーストマネージャー
useDefaults(name, props)	マージされたデフォルト値（computed）
usePrefix()	クラスの prefix（computed）
useThl()	生の ThlInstance

テンプレートでは $t と $thl も使えます。

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

v-model

すべてのコントロールが v-model（modelValue）に対応し、必要に応じて名前付きモデルもサポートします。

<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="こんにちは" />
<ThlSteps v-model:current="step" :items="steps" />

フォームとバリデーション

ThlField は生成した id をデフォルトスロット経由で公開します。

<ThlForm :values="v" @submit="(ok) => ok && save()">
  <ThlField label="メールアドレス" 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">送信</ThlButton>
</ThlForm>

ルーティング（AppLayout）

#link スロットを使って、サイドメニューにルーターのリンクをレンダリングします。

<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();