API reference · Vue

@oriatheme/vue

Connect one runtime to a Vue Plugin, provide, and Composable without mirroring runtime state.

Package and environment

Browser Plugin/provide for Vue 3.5; the module itself is SSR-safe to import.

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

Use the package manager and lockfile already chosen by the consumer project. Examples use package-root exports only; do not deep-import from src, dist, or registry templates.

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>

Important types and boundaries

snapshot is a DeepReadonly<ShallowRef<ThemeSnapshot>>. Do not mirror theme, appearance, or resolvedMode into Pinia or another store.