DOCSEARCHbyAlgolia
Submit Docs

Vuetify Zero

repository·master·Indexed 41 days ago

https://github.com/vuetifyjs/0

A collection of headless Vue 3 UI primitives and composables providing logic and accessibility for modern applications and design systems without default styling. Version 1.0.0-beta.3 requires Node.js >= 26, pnpm >= 10.6, and Vue >= 3.5.0. It features a comprehensive suite of primitives, providers, and data-driven widgets, utilizing a 'Trinity Pattern' for dependency injection and context usage.

Tokens
530.5K
Snippets
1.5K
Records
2.4K
Agent score
61%

What's inside Vuetify Zero

  1. What is Vuetify0

    master

    {@vuetify/v0} provides headless composables for building UI logic without enforcing specific HTML or CSS structures. It handles complex logic for selection, registration, forms, and theming, allowing developers to bring their own markup and styling.

    Key capabilities include:

    • Selection & State: Logic for single, group, step, and nested selection.
    • Forms: Form management and validation logic.
    • Theming: Reactive theme management.
    • Foundation: Context, registry, and token creation.

  2. Overview of @vuetify/v0 Philosophy and Axioms

    master

    The @vuetify/v0 project is governed by a strict set of architectural principles (Axioms) and design philosophies. These principles ensure high type safety, predictable reactivity, and a strict separation between logic and presentation (Headless contract).

    Key areas of focus include:

    • Identity: Defining what the project is (and is not) and its compatibility with Vapor.
    • Axioms: Non-negotiable foundations such as 'Zero any' and 'Headless contract is absolute'.
    • API Shape: Standards for returns, arguments, names, slots, and comments.
    • Reactivity: Rules for primitives, readonly state, options, and scope.
    • Headless Architecture: An operational definition of how logic is decoupled from UI.
    • Registries: Management of context, tickets, and proxy models.
    • Events & Lifecycle: Standards for binding, mounting, cleanup, and toggle scope.
    • Types: Strict typing rules regarding any, readonly-ref, generics, and slot guards.
    • Error Handling: Standards for throwing, warning, returning, and SSR-safe logging.
    • Anti-patterns: A collection of concrete 'before/after' examples to avoid common mistakes.

  3. Introduction to @vuetify/v0

    master
    The @vuetify/v0 package provides headless composables for building UI logic without enforced markup or styling opinions. It handles complex state management for selection, registration, forms, and theming, allowing you to provide your own HTML and CSS. This approach separates the logic of UI components from their visual representation.

  4. Overview of Vuetify0 Components

    master
    Vuetify0 provides a collection of headless, accessible, and highly customizable Vue 3 UI primitives. Because they are 'headless', they do not come with default styles, allowing you to build your own design systems while leveraging built-in accessibility (ARIA), keyboard navigation, and complex logic. The component library is organized into several functional categories: Primitives, Providers, Actions, Forms, Data, Semantic, and Disclosure.

  5. Overview of Vuetify v0 Composables

    master

    Vuetify v0 exposes a rich set of composables (headless logic) categorized by their purpose. These allow you to manage complex state and behavior independently of your UI implementation.

    Composable Categories

    • Foundation: Core factories like createContext, createPlugin, and createTrinity (the [use, provide, default] pattern).
    • Registration: Base data structures like createRegistry, createQueue, createTimeline, and createTokens.
    • Data: Logic for managing complex data, including createDataGrid, createDataTable, createFilter, createKanban, createPagination, createSortable, and createVirtual.
    • Selection: State management for selection via createSelection, createModel, createGroup, createSingle, createStep, and createNested.
    • Forms: Logic for form fields via createForm, createInput, createNumberField, createNumeric, createOtp, createValidation, createCombobox, createRating, and createSlider.
    • Reactivity: Bridges for reactivity like useProxyModel and useProxyRegistry.
    • Semantic: Logic for semantic elements like createBreadcrumbs, createOverflow, and createProgress.
    • Transformers: Utilities to transform data, such as toArray, toElement, toHighlight, and toReactive.
    • System: Browser/DOM utilities like useClickOutside, useDragDrop, useHotkey, useIntersectionObserver, useMediaQuery, usePopover, useRovingFocus, useResizeObserver, and useVirtualFocus.
    • Plugins: High-level feature composables following the trinity pattern, such as useBreakpoints, useDate, useLocale, useNotifications, useTheme, and useRtl.

  6. Overview of Vuetify v0 Components

    master

    Vuetify v0 provides a comprehensive suite of UI components categorized by their functional role. These components range from low-level primitives to complex data-driven widgets.

    Component Categories

    • Primitives: Low-level building blocks like AspectRatio, Atom (polymorphic base), Portal (teleportation), and Presence (lifecycle management).
    • Providers: Context-based components for managing state across groups, such as Locale, Theme, Selection, and Step (sequential navigation).
    • Actions: Interactive elements like Button and Toggle.
    • Forms: Input and selection controls including Checkbox, Combobox, Form (validation coordinator), Input, NumberField, Radio, Select, Rating, Slider, and Switch.
    • Disclosure: Components for revealing content, such as AlertDialog, Collapsible, Dialog, ExpansionPanel, Popover, Tabs, Tooltip, and Treeview.
    • Semantic: Meaningful UI elements like Alert, Avatar, Breadcrumbs, Carousel, Image, Overflow, Pagination, Progress, Snackbar, and Splitter.
    • Data: Complex data management components like DataGrid and DataTable (both headless).

  7. Understand @paper/bulma identity and usage

    master

    @paper/bulma is a Compat class package designed to provide JavaScript behavior, focus management, and accessibility for the Bulma CSS framework.

    Key Characteristics:

    • Zero-JS Bulma: While Bulma is CSS-only, @paper/bulma provides the necessary JS for components like modals, dropdowns, navbar burgers, and dismissals.
    • Markup Fidelity: Components render authentic Bulma markup and classes (e.g., is-active, is-current, .modal) to ensure compatibility with your existing bulma.css.
    • Component Prefix: All components use the Bu prefix (e.g., BuModal, BuSelect, BuCheckbox).
    • Styling Source: This package does not ship its own CSS. You must provide Bulma via CSS, SASS, or a CDN.
    • Peer Dependency: It expects bulma@^1.0 (verified with 1.0.4). Bulma 0.9.x is unsupported because it lacks CSS variables.

  8. Vuetify0 License Information

    master

    Vuetify0 is released under the MIT License, which is a highly permissive open source license.

    Permitted Uses

    • Use: You can use Vuetify0 in both personal and commercial projects.
    • Modify: You can modify the source code to suit your specific requirements.
    • Distribute: You can distribute the original or your modified versions.
    • Sublicense: You can include Vuetify0 in proprietary software.

    Requirements

    The only requirement is that you must include the original copyright notice and the license text in any copy of the software or any substantial portion of it.

  9. Explore Vuetify0 Professional Tooling

    master

    Vuetify0 provides several professional tools to assist in the development lifecycle:

    • create-vuetify0: One-command project scaffolding.
    • Vuetify CLI: Used to analyze usage, generate components, and debug issues.
    • Vuetify MCP: An AI-native Model Context Protocol server providing API access for AI assistants like Claude and Cursor.
    • Vuetify Play: A browser-based IDE for real-time experimentation.
    • Vuetify Bin: A tool to share runnable code snippets via a URL.

  10. DevKey technology stack overview

    master

    DevKey is a production-shaped starter project that demonstrates how @vuetify/v0 integrates with a modern web toolchain. The stack includes:

    • Framework: Vue 3.5+
    • Build Tool: Vite 8
    • Language: TypeScript
    • UI Primitives: @vuetify/v0
    • Styling: UnoCSS (mapped to v0 theme tokens)
    • Routing: vue-router 5
    • Fonts: @fontsource/inter via unplugin-fonts
    • Icons: @mdi/js
    • Package Manager: pnpm (recommended)

  11. Accessibility features of the documentation

    master

    The documentation is designed to be accessible and follows these standards:

    • Keyboard Navigation: All interactive elements are reachable via keyboard.
    • ARIA Labels: Controls are correctly announced by screen readers.
    • Skip Link: A "Skip to main content" link is available upon focus.
    • Reduced Motion: Animations respect the prefers-reduced-motion system setting.
    • Focus Indicators: Clear visual states are provided for focused elements.
    • Semantic HTML: Uses proper heading hierarchies and landmarks.

  12. What is a Trinity and how is it used?

    master

    A Trinity is a readonly three-element tuple returned by Vuetify0's context and plugin factories. It provides a predictable shape for all consumption modes:

    • Context factories return [useX, provideX, defaultX].
    • Plugin factories return [createXContext, createXPlugin, useX].

    This structure ensures you can always inject in a child (useX), provide from a parent (provideX), or use the logic standalone/in tests (defaultX).