インストール

環境要件

• Node.js >= 18
• pnpm >= 8

インストール

# pnpm を使う場合
pnpm add @lh-ui/vue3

# npm を使う場合
npm install @lh-ui/vue3

# yarn を使う場合
yarn add @lh-ui/vue3

コンポーネントのインポート

完全なインポート

import { createApp } from 'vue'
import App from './App.vue'
import LhUiPlus from '@lh-ui/vue3'
import '@lh-ui/vue3/dist/index.css'

const app = createApp(App)
app.use(LhUiPlus)
app.mount('#app')

オンデマンドインポート

パッケージのルートパスから名前付きでコンポーネントをインポートし、対応するコンポーネントのスタイルを別途インポートします（スタイルのサブパスは @lh-ui/vue3/style/<コンポーネント名> です）：

<script setup lang="ts">
import { LhButton } from '@lh-ui/vue3'
import '@lh-ui/vue3/style/button'
</script>

<template>
  <LhButton type="primary">中華風ボタン</LhButton>
</template>

現時点では unplugin-vue-components の Resolver は提供していません。自動オンデマンドインポートについては、上記の書き方でコンポーネントとスタイルを手動インポートしてください。

オンデマンドインポートには 2 つのスタイルパスが選べます：

サブパス	説明
@lh-ui/vue3/style/<コンポーネント名>	SCSS ソースファイルを指す。消費側でデザイン変数を上書きして深いカスタマイズができるが、プロジェクトに sass がインストールされている必要がある
@lh-ui/vue3/style-css/<コンポーネント名>	ビルド時に事前コンパイルされた CSS を指す。sass なしでそのまま使える

// プロジェクトに sass があり、深いカスタマイズが必要な場合
import '@lh-ui/vue3/style/button'

// プロジェクトに sass がない、またはカスタマイズが不要な場合
import '@lh-ui/vue3/style-css/button'

CDN からのインポート

パッケージの UMD 産物はパブリック CDN に公開されており、デモページやバンドルパイプラインを使いたくない場面に適しています：

<!-- コンポーネント（window.lhUiPlus としてグローバルに公開） -->
<script src="https://unpkg.com/@lh-ui/vue3"></script>
<!-- または jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@lh-ui/vue3"></script>
<!-- 完全なスタイル -->
<link rel="stylesheet" href="https://unpkg.com/@lh-ui/vue3/dist/index.css" />

const app = Vue.createApp({ /* ... */ })
app.use(lhUiPlus)
app.mount('#app')

バージョンを固定する場合はパッケージ名の後に @<version> を付けます（例：https://unpkg.com/@lh-ui/vue3@1.0.0）。本番環境ではバージョンを固定し、新バージョンの公開によって CDN 産物が意図せずアップグレードされるのを防ぐことをお勧めします。

プライベートサーバーからのインストール

イントラネット内で npm アクセスが制限されている場合や、自己ホストのミラーにバージョンを固定したい場合は、作者のプライベートサーバーから直接 tarball をインストールできます（ホスティングの詳細はリリースガイドを参照）：

# pnpm
pnpm add https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz

# npm
npm install https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz

# yarn
yarn add https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz

または package.json に書き込みます：

{
  "dependencies": {
    "@lh-ui/vue3": "https://www.lhgb.top/lhui/vue3/packages/1.0.0/lh-ui-vue3-1.0.0.tgz"
  }
}

tarball インストールは registry のバージョン解決を bypass するため、アップグレード時には手動で URL を置き換える必要があります。本パッケージはランタイム依存をゼロにし、プロジェクト内に Vue 3 がインストールされていることだけを要件とします。

通常のパッケージと同じように pnpm add @lhgb/vue3 でバージョン解決を利用したい場合は、プライベート registry メタデータの方式でインストールできます。