アプリケーション開発者向け

Vue統合

プラグインまたはプロバイダーを使用して 1 つのランタイムを接続し、コンポーザブルを通じてその不変スナップショットを読み取ります。

マウントする前に Bootstrap を実行し、プラグインをインストールします

import { createApp } from "vue";
import { createOriaTheme } from "@oriatheme/vue";
import { bootstrapTheme } from "@oriatheme/runtime-dom";
import { oriaPresetThemes } from "@oriatheme/presets";
import App from "./App.vue";

bootstrapTheme({ contract: { name: "oria-standard", version: 2 } });
createApp(App)
  .use(createOriaTheme({ presets: oriaPresetThemes, defaultThemeId: "oria-default" }))
  .mount("#app");

子孫でコンポーザブルを使用する

vue

<script setup lang="ts">
import { useOriaTheme } from "@oriatheme/vue";

const { snapshot, setAppearance, setTheme } = useOriaTheme();
</script>

<template>
  <p>{{ snapshot.preference.activeThemeId }} / {{ snapshot.resolvedMode }}</p>
  <button @click="setTheme('oria-ocean')">Ocean</button>
  <button @click="setAppearance('system')">System</button>
</template>

スナップショットはランタイムにサブスクライブされた浅い参照です。 Vue ストアのテーマ、外観、または解像度モードをミラーリングしないでください。

エディタが閉じている間はエディタをロードしないでください

defineAsyncComponent を使用して、CLI でインストールされたローカル ThemeEditor をロードし、開いているときにのみレンダリングします。ローカルエディターのエントリは、独自の CSS をインポートします。グローバル CSS に静的にインポートしないでください。

続行: カスタムテーマの作成とインポート