Lase

Appearance

フロントエンド (JS アセット) ​

Lase は Vue 3 ベースのフロントエンドアセットを NPM パッケージ @codebase-jp/lase として提供します。

インストール ​

bash
npm install @codebase-jp/lase

ピア依存関係も合わせてインストールしてください：

bash
npm install vue axios bootstrap bootstrap-icons dayjs vue-router @codebase-jp/vase

モジュール構成 ​

パッケージはコンテキスト別にモジュールが分かれています。

@codebase-jp/lase
├── api/
│   ├── admin/        管理者 API クライアント
│   ├── tenant/       テナント API クライアント
│   ├── common/       共通 API クライアント
│   └── public/       パブリック API クライアント
├── components/
│   ├── admin/        管理画面コンポーネント
│   ├── tenant/       テナント画面コンポーネント
│   └── common/       共通コンポーネント
├── composables/
│   ├── admin/        管理者向け composable
│   └── common/       共通 composable
├── views/
│   ├── admin/        管理画面ビュー（Vue SFC）
│   ├── tenant/       テナント画面ビュー
│   ├── public/       パブリック画面ビュー
│   └── common/       共通ビュー
├── routes/
│   ├── admin/        管理者ルート定義
│   ├── tenant/       テナントルート定義
│   └── public/       パブリックルート定義
├── models/           TypeScript 型定義モデル
├── enums/            TypeScript Enum
├── filters/          フィルター関数
├── utils/            ユーティリティ関数
└── types/            共通型定義

Composables ​

共通 ​

composable説明
useAppアプリケーション情報の取得・管理
useAuth認証状態・ログイン・ログアウト
useAiChatAI チャット
useConfigフロントエンド設定値の取得（詳細）
useLoggerクライアントログの送信
useRecaptchareCAPTCHA v3 トークン取得

管理者 ​

composable説明
useSenterSenter 課金サービスとの連携

useConfig ​

useConfig は、サーバーサイドの設定値をフロントエンドで参照するための composable です。

仕組み ​

Lase は GET /config エンドポイントを提供しており、Laravel の設定値（config('lase.front') と config('front')）をマージして window.__CONFIG__ としてブラウザに渡します。Blade テンプレートで以下のように読み込みます：

html
<script src="/config"></script>

useConfig はこの window.__CONFIG__ の値を読み取ります。

設定値の定義 ​

設定値は以下の 2 箇所で定義できます。アプリ側（config/front.php）の値が優先されます。

ファイル説明
config/lase.php の front キーパッケージ側のデフォルト値
config/front.phpアプリ側で追加・上書き
php
// config/front.php
return [
    'recaptchaSiteKey' => env('FRONT_RECAPTCHA_SITE_KEY'),
    'docsUrl' => env('FRONT_DOCS_URL', '/docs/'),
];

WARNING

/config のレスポンスはブラウザに公開されます。秘密鍵やパスワードなどの機密情報は絶対に含めないでください。

API ​

typescript
import useConfig from '@codebase-jp/lase/composables';

const { config, get, has } = useConfig();
プロパティ / メソッド型説明
configRecord<string, ConfigValue>設定オブジェクト全体
get(key, defaultValue?)<T>(key: string, defaultValue?: T) => T | undefinedドット記法で値を取得
has(key)(key: string) => booleanキーが存在するか判定

使用例 ​

typescript
const { get, has } = useConfig();

// 値を取得
const siteKey = get<string>('recaptchaSiteKey');

// デフォルト値付き
const docsUrl = get<string>('docsUrl', '/docs/');

// ネストされた値をドット記法で取得
const value = get<string>('nested.deep.key');

// 存在チェック
if (has('recaptchaSiteKey')) {
  // ...
}

管理画面ビュー ​

管理画面の Vue コンポーネントが提供されています。

ディレクトリ説明
views/admin/dashboard/ダッシュボード
views/admin/tenants/テナント管理
views/admin/users/ユーザー管理
views/admin/plans/プラン管理
views/admin/announcements/お知らせ管理
views/admin/admin-users/管理者ユーザー管理
views/admin/admin-roles/管理者ロール管理
views/admin/admin-mails/メール管理
views/admin/admin-images/画像管理
views/admin/inquiries/お問い合わせ管理
views/admin/blocked-domains/禁止ドメイン管理
views/admin/tenant-roles/テナントロール管理

ルーティング ​

Lase のルートをアプリの Vue Router に組み込む例：

typescript
import { createRouter, createWebHistory } from 'vue-router';
import adminRoutes from '@codebase-jp/lase/routes/admin';
import tenantRoutes from '@codebase-jp/lase/routes/tenant';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    ...adminRoutes,
    ...tenantRoutes,
  ],
});

TypeScript 型 ​

モデルの TypeScript 型は @codebase-jp/lase/models からインポートできます：

typescript
import type { Tenant, User, Subscription, Plan } from '@codebase-jp/lase/models';

Copyright © Codebase Inc.