API 参考 · Vue

@oriatheme/vue

将同一个 Runtime 接入 Vue Plugin、provide 与 Composable；不复制 Runtime 状态。

包与运行环境

Vue 3.5 的浏览器 Plugin/provide；模块本身可 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

选择使用方项目已有的一种包管理器和 lockfile；示例只使用 package root export，不要从 src、dist 或 registry template 深层导入。

Exports

Export	Signature	Description
`createOriaTheme`	`(config: OriaThemeConfig) => Plugin`	Creates a plugin that owns the runtime it constructs.
`provideOriaTheme`	`(config \| runtime) => OriaThemeRuntime`	Provides an owned or caller-supplied runtime in the current tree.
`useOriaTheme`	`() => { snapshot, runtime, setTheme, setAppearance }`	Returns the runtime and a readonly shallow snapshot ref.

vue

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

重要类型与边界

snapshot 是 DeepReadonly<ShallowRef<ThemeSnapshot>>。不要在 Pinia 或其他 store 里复制主题、appearance 或 resolvedMode。