API-Referenz · Vue

@oriatheme/vue

Verbinden Sie eine Laufzeit mit einem Vue-Plugin, stellen Sie es bereit und komponieren Sie es, ohne den Laufzeitstatus zu spiegeln.

Paket und Umgebung

Browser-Plugin/bereitgestellt für Vue 3.5; Das Modul selbst ist SSR-sicher zu importieren.

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

Verwenden Sie den Paketmanager und die Sperrdatei, die bereits vom Verbraucherprojekt ausgewählt wurden. Beispiele verwenden nur Paket-Root-Exporte; Führen Sie keinen Deep-Import aus src-, dist- oder Registry-Vorlagen durch.

Exports

Exportieren	Unterschrift	Beschreibung
`createOriaTheme`	`(config: OriaThemeConfig) => Plugin`	Erstellt ein Plugin, das Eigentümer der von ihm erstellten Laufzeit ist.
`provideOriaTheme`	`(config \| runtime) => OriaThemeRuntime`	Stellt eine eigene oder vom Aufrufer bereitgestellte Laufzeit im aktuellen Baum bereit.
`useOriaTheme`	`() => { snapshot, runtime, setTheme, setAppearance }`	Gibt die Laufzeit und eine schreibgeschützte, flache Snapshot-Referenz zurück.

vue

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

Wichtige Typen und Grenzen

snapshot ist ein DeepReadonly<ShallowRef<ThemeSnapshot>>. Spiegeln Sie das Thema, das Erscheinungsbild oder den Auflösungsmodus nicht in Pinia oder einem anderen Shop.