API參考·Vue

@oriatheme/vue

將一個運行時連接到 Vue 插件、提供和可組合，無需鏡像運行時狀態。

包裝及環境

瀏覽器插件/為Vue 3.5提供；模組本身是 SSR 安全的，可以安全導入。

bash

pnpm add @oriatheme/presets @oriatheme/runtime-dom @oriatheme/vue

bash

npm install @oriatheme/presets @oriatheme/runtime-dom @oriatheme/vue

bash

yarn add @oriatheme/presets @oriatheme/runtime-dom @oriatheme/vue

bash

bun add @oriatheme/presets @oriatheme/runtime-dom @oriatheme/vue

使用消費者專案已經選擇的套件管理器和鎖定檔案。範例僅使用包根匯出；不要從 src、dist 或註冊表範本深度匯入。

Exports

出口	簽名	描述
`createOriaTheme`	`(config: OriaThemeConfig) => Plugin`	建立一個擁有其建構的運行時的插件。
`provideOriaTheme`	`(config \| runtime) => OriaThemeRuntime`	在目前樹中提供自有或呼叫者提供的運行時。
`useOriaTheme`	`() => { snapshot, runtime, setTheme, setAppearance }`	傳回運行時和只讀淺快照參考。

vue

<script setup lang="ts">
import { useOriaTheme } from "@oriatheme/vue";
const { snapshot, setAppearance } = useOriaTheme();
</script>
<template><button @click="setAppearance('system')">{{ snapshot.resolvedMode }}</button></template>

重要類型和邊界

快照是 DeepReadonly<ShallowRef<ThemeSnapshot>>。不要將主題、外觀或resolvedMode鏡像到Pinia或其他商店。