- Visit vuejs.org to read the - documentation -
+Vue 3 component framework
++ Compact, predictable components for desktop enterprise and productivity applications. +
+ +Navigation
+
+ Compose application-level regions with CAppBar, then place data-driven
+ horizontal or vertical menus where the workflow needs them.
+
A horizontal menu can share the bar with centered context and controls at the end.
++ Each regular menu entry has a label and can include a Unicode icon or a nested menu. +
+labeliconCIcon before the label.
+ children
+ Set disabled when an action is currently unavailable. The item remains
+ visible but cannot be activated, is skipped by menu keyboard navigation, and its command
+ will not run. Use hidden when an item should not be shown at all.
+
disabledaria-disabled="true". It is commonly derived
+ from application state, permissions, or whether an operation can currently run.
+ hidden
+ Menu entries with a url render as links. Use target to choose
+ where a link opens and active to identify the current page.
+
urlhref. Without it, the item renders as a button for a
+ command or submenu.
+ targettarget. Omit it for the current tab
+ (_self), or use _blank for a new tab. It has no effect without
+ url.
+ activearia-current="page". Set it from the
+ router or application state; CMenu does not match routes automatically.
+ Controls
+
+ CButton provides compact actions with native button behavior, restrained
+ semantic variants, icons, and asynchronous states.
+
+ Use color only when it communicates meaning: primary for the main action, success for a + positive workflow outcome, warning for a consequential action, and danger for a + destructive operation. +
+
+ Pass a Unicode symbol or emoji through icon, or use the named
+ icon slot for custom presentation. Icon-only buttons require an
+ aria-label.
+
+ Disabled buttons cannot be activated. Loading also disables the button, adds
+ aria-busy="true", and replaces its icon with a rotating progress symbol.
+
+ Use semantic sizes to keep controls consistent. The compact medium size is the
+ default; small and large are available for denser tool areas or more prominent actions.
+
+ The default type is button, preventing accidental form submission.
+ Set it explicitly to submit or reset when needed. Native attributes
+ and event listeners are forwarded to the underlying button.
+
variantdefault, primary, success,
+ warning, or danger.
+ typebutton, submit, or reset.sizesmall (26px), medium (30px, default), or
+ large (34px).
+ icondisabledloadingaria-labelVisual
+
+ Unicode Emoji {{ emojiCatalogVersion }} contains {{ emojiCatalog.length.toLocaleString() }}
+ emoji characters and sequences. Render them with CIcon; artwork and color
+ depend on the operating system.
+
+ Browse the official Unicode groups and subgroups, then copy an emoji directly into a
+ CIcon default slot.
+
No emoji match the current filters.
+ +{{ copyStatus }}
+ + +Paste the selected character directly into the component's default slot.
+<CIcon>🍇</CIcon>
+ 18px circle
+ :rotate="-0.25"
+ Visual
+
+ CIcon presents monochrome Unicode symbols using the surrounding text color.
+ Copy a curated symbol into the component's default slot.
+
+ These symbols were selected for compact application commands and indicators. Rendering + can vary slightly with the installed symbol font. +
+ +No symbols match the current filters.
+{{ copyStatus }}
+Paste a Unicode symbol into the default slot and configure its presentation with props.
+<CIcon>✓</CIcon>
+ 1.5em inline
+ 18px circle
+ The color prop accepts any valid CSS color value and applies it to the symbol.
+red
+ green
+ #FFFF00
+ rgba(47, 111, 173, 0.65)
+ The signed value represents revolutions per second. Negative values rotate counterclockwise.
+:rotate="1"
+ :rotate="-0.5"
+ Layout
+
+ CSideBar provides header, scrollable content, and footer regions for compact
+ desktop application navigation.
+
+ A vertical menu expands inline while the surrounding application content remains fixed. + Multiple branches can remain expanded. +
+
+ Add collapsible to show a boxed menu button before the header content. The
+ sidebar slides between its expanded and collapsed widths and keeps its menu state,
+ including expanded menu branches.
+
collapsiblecollapsedv-model:collapsed. The model is
+ optional; without it, CSideBar manages its own state.
+ collapsed-width38px.
+ Use the default placement="start" for navigation before the main content and
+ placement="end" for tools or details after it. These are logical directions:
+ start is left and end is right in left-to-right layouts, with the meaning reversed in
+ right-to-left layouts.
+
+ Placement controls which inner edge receives the divider. The parent flex or grid layout
+ and the sidebar's document order determine its actual position. For the usual
+ side-by-side application shell, give the parent display: flex and allow the
+ main content to grow with flex: 1.
+
+ Apply standard class or style attributes to customize the
+ sidebar with any valid CSS background, including a color, gradient, or image.
+
+ For dark backgrounds, set --c-text-color so sidebar content and nested
+ Concise UI components use a suitable foreground color.
+