Vue 3 アダプタ
@love-rox/tcy-vue
Vue 3 向けの `<Tcy>` コンポーネント。React 版と同じオプション・同じ挙動で、Vue アプリにそのまま組み込めます。
v0.3.0MITvue 3.x
インストール
@love-rox/tcy-core は依存として自動的に引き込まれるので、別途インストールする必要はありません。
bun
bun add @love-rox/tcy-vuepnpm
pnpm add @love-rox/tcy-vuenpm
npm i @love-rox/tcy-vueyarn
yarn add @love-rox/tcy-vue使い方
<script setup> でインポートして、縦組みの親要素の中で <Tcy> 子要素として使います。slot 内の文字列のみを書き換え、要素ノードはそのまま再帰的に処理します。
Vue 3vue
<script setup lang="ts">
import { Tcy } from "@love-rox/tcy-vue";
</script>
<template>
<p style="writing-mode: vertical-rl">
<Tcy>第1章 2026年4月、Webの縦書きは進化した。</Tcy>
</p>
</template>オプション
React 版とまったく同じオプションを受け付けます。共通オプションは rehype / Astro とも完全に揃っています。
共通オプション
| オプション | 型 | 既定値 | 説明 |
|---|---|---|---|
| target | 'alphanumeric' | 'alpha' | 'digit' | 'ascii' | RegExp | 'alphanumeric' | 縦中横対象として扱う文字種。alphanumeric は [0-9A-Za-z]、ascii は印字可能な ASCII 全般。任意の RegExp も指定可能。 |
| combine | boolean | true | 連続した対象文字を1つのスパンにまとめるか。false にすると1文字ずつ別々のスパンで包みます。 |
| include | string | string[] | undefined | target に含まれなくても対象として扱う追加の文字。 |
| exclude | string | string[] | undefined | 対象から外したい文字。include より優先されます。 |
| maxLength | number | undefined | 縦中横セグメントの最大文字数。これを超える長さの英数字 run はプレーンテキストに戻ります。たとえば maxLength: 2 にすると 2026 のような4桁年は寝かせ、1 や 19 の短い run のみを縦中横にできます。 |
| excludeWords | string[] | undefined | 縦中横にしたくない語を完全一致で指定（部分一致ではなくセグメント値全体のマッチ）。URL API のような固有の略号や、特定の年号だけを横倒しのまま残したいときに便利。 |
コンポーネント専用プロパティ
| オプション | 型 | 既定値 | 説明 |
|---|---|---|---|
| className | string | 'tcy' | 生成される span に付与するクラス名。 |
| as | keyof JSX.IntrinsicElements | 'span' | ラップに使用するタグ名。 |
挙動の注記
<em>12</em>34のように要素境界をまたぐ文字列は連結されず、別々のスパンになります。- 全角英数字（
Ａ〜Ｚ/０〜９）は既定で対象外。縦組みでも既に正立して表示されるためです。 - SSR-safe。Nuxt 3 などでサーバーレンダリングしてもクライアントで同じ DOM を生成します。
- slot に渡された VNode を再帰的に走査し、テキストノードだけをラップ対象とします。
他のアダプタ
React を使っているなら同じ API の React 版があります。Markdown / Astro パイプラインなら Vue を持ち込まずに rehype / Astro 版が使えます。