App default props

Configure a small approved set of presentation defaults while installing the full Ooko plugin:

import { createApp } from "vue";
import Ooko from "ooko-ui";

import App from "./App.vue";

createApp(App)
  .use(Ooko, {
    defaultProps: {
      OAlert: { color: "info", closeLabel: "Dismiss notification" },
      OButton: { color: "primary", size: "xs" },
      OCheckbox: { size: "sm" },
      OField: { size: "md" },
      OInput: { size: "sm" },
      OTextarea: { size: "sm" },
      OSelect: { size: "sm", searchable: true, placeholder: "Choose…" },
      ORadio: { size: "sm" },
      OSwitch: { size: "sm" },
      OPagination: { preset: "laravel" },
    },
  })
  .mount("#app");

A prop supplied directly to a component always wins, including false. The app default is used only when that prop is absent, and the component's built-in default is the final fallback. Each Vue app owns its configuration through dependency injection, so concurrent applications and SSR requests do not share mutable defaults.

The accepted keys are intentionally narrow: OAlert supports color and closeLabel; OButton supports color, size, outline, nude, soft, and iconPosition; OField, OInput, and OTextarea support size and iconPosition; OCheckbox, ORadio, and OSwitch support size; OSelect supports size, searchable, labels, and placeholder; OPagination supports preset. OActionBar, OCard, ODropdown, OForm, OList, OSegmented, OTable, OTabs, OTabPane, and OTimeline expose no global defaults. Field and form-control size is "sm" | "md"; buttons additionally accept "xs" and "lg". Every component keeps "md" as its built-in default. TypeScript rejects component names and props outside this map.

Glass mode

Pass glass: true to turn on the translucent glass variant of every component that has one, for an interface laid over a decorated background:

createApp(App).use(Ooko, { glass: true }).mount("#app");

OAlert, OCard, ODialog, ODrawer, programmatic dialogs and drawers, ODropdown, ONotif, OSelect, and OTable follow it. A glass prop set on a component still wins, so :glass="false" keeps one opaque surface in a glass app. Like defaultProps, the option belongs to the Vue app and is never shared between apps or SSR requests.