Pour les développeurs d'applications

Intégration Vue

Attachez un runtime avec un plugin ou fournissez-le, puis lisez son instantané immuable via un Composable.

Bootstrap avant le montage, puis installez le plugin

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");

Utiliser le Composable dans la descendance

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>

l'instantané est une référence superficielle abonnée au runtime ; ne mettez pas en miroir le thème, l'apparence ou le mode résolu dans un magasin Vue.

Ne chargez pas l'éditeur lorsqu'il est fermé

Utilisez finishAsyncComponent pour charger le ThemeEditor local installé par la CLI et le restituer uniquement lorsqu'il est ouvert. L'entrée de l'éditeur local importe son propre CSS ; ne l'importez pas de manière statique dans CSS global.

Continuer : créer et importer des thèmes personnalisés