# CoreUI Vue.js documentation > CoreUI for Vue.js is a UI component library written in TypeScript and ready for your next Vue.js project. --- # Introduction > CoreUI for Vue.js is UI Component library written in TypeScript, and ready for your next Vue.js project. Learn how to include CoreUI for Vue.js in your project. ## Installation ### Npm ```bash tab={"label":"CoreUI"} npm install @coreui/vue @coreui/coreui ``` ```bash tab={"label":"CoreUI PRO"} npm install @coreui/vue-pro @coreui/coreui-pro ``` ### Yarn ```bash tab={"label":"CoreUI"} yarn add @coreui/vue @coreui/coreui ``` ```bash tab={"label":"CoreUI PRO"} yarn add @coreui/vue-pro @coreui/coreui-pro ``` ## Using components ```js tab={"label":"CoreUI"} import { CAlert } from '@coreui/vue'; ``` ```js tab={"label":"CoreUI PRO"} import { CAlert } from '@coreui/vue-pro'; ``` ## Stylesheets Vue components are styled using the `@coreui/coreui` or `@coreui/coreui-pro` CSS library, but you can also use them with the bootstrap CSS library. That is possible because the `@coreui/coreui` library is compatible with Bootstrap, it just extends its functionalities. The only exceptions are custom CoreUI and CoreUI PRO components, which don't exist in the Bootstrap ecosystem. ### CoreUI CSS files ###### Basic usage ```js tab={"label":"CoreUI"} import '@coreui/coreui/dist/css/coreui.min.css' ``` ```js tab={"label":"CoreUI PRO"} import '@coreui/coreui-pro/dist/css/coreui.min.css' ``` ### Bootstrap CSS files ###### Installation ```bash npm install bootstrap ``` ###### Basic usage ```js import 'bootstrap/dist/css/bootstrap.min.css' ``` --- # Accessibility > A brief overview of CoreUI for Vue features and limitations for the creation of accessible content. CoreUI for Vue provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box. ## Overview and limitations The overall accessibility of any project built with CoreUI for Vue depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with CoreUI for Vue that fulfill [WCAG 2.1](https://www.w3.org/TR/WCAG21/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements. ### Structural markup CoreUI for Vue styling and layout can be applied to a wide range of markup structures. This documentation aims to provide developers with best practice examples to demonstrate the use of CoreUI for Vue itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed. ### Interactive components CoreUI for Vue interactive components—such as modal dialogs, dropdown menus, and custom tooltips—are designed to work for touch, mouse, and keyboard users. Through the use of relevant [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers). Because CoreUI for Vue components are purposely designed to be fairly generic, authors may need to include further ARIA roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation. ### Color contrast Some combinations of colors that currently make up CoreUI for Vue default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.1 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG21/#contrast-minimum) and the [WCAG 2.1 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG21/#non-text-contrast)), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios. ### Visually hidden content Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the `.visually-hidden` class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users. ```html

This action is not reversible

``` For visually hidden interactive controls, such as traditional "skip" links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, compared to the equivalent `.sr-only` and `.sr-only-focusable` classes in past versions, CoreUI's `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.** ```html Skip to main content ``` ### Reduced motion CoreUI for Vue includes support for the [`prefers-reduced-motion` media feature](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in CoreUI for Vue (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down. On browsers that support `prefers-reduced-motion`, and where the user has *not* explicitly signaled that they'd prefer reduced motion (i.e. where `prefers-reduced-motion: no-preference`), CoreUI for Vue enables smooth scrolling using the `scroll-behavior` property. ## Additional resources - [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/) - [The A11Y Project](https://www.a11yproject.com/) - [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility) - [Tenon.io Accessibility Checker](https://tenon.io/) - [Color Contrast Analyser (CCA)](https://developer.paciellogroup.com/resources/contrastanalyser/) - ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer) - [Microsoft Accessibility Insights](https://accessibilityinsights.io/) - [Deque Axe testing tools](https://www.deque.com/axe/) --- # LLMs.txt > LLM-optimized documentation endpoints for CoreUI for Vue — llms.txt, llms-full.txt, and a Markdown version of every page. ## Introduction [llms.txt](https://llmstxt.org) is an emerging standard that helps AI models understand and navigate documentation. The CoreUI for Vue docs expose three LLM-friendly endpoints so assistants can retrieve accurate, up-to-date content straight from the source. For a richer, tool-based integration, see [MCP Server](https://coreui.io/vue/docs/ai-tools/mcp/). ## /llms.txt A structured index of the documentation — every page as a titled, described link, grouped by section. It gives an LLM a compact map of what exists and where. [Open llms.txt](https://coreui.io/vue/docs/llms.txt) ## /llms-full.txt The entire documentation concatenated into a single Markdown file, so a model can ingest the whole set in one request. [Open llms-full.txt](https://coreui.io/vue/docs/llms-full.txt) ## Markdown version of any page Append `.md` to any documentation page URL to get its clean Markdown version, without the site chrome. For example: [/vue/docs/components/accordion.md](https://coreui.io/vue/docs/components/accordion.md) --- # MCP Server > Bring the CoreUI for Vue documentation into your AI coding assistant with the @coreui/docs-mcp Model Context Protocol server. ## Introduction [Model Context Protocol (MCP)](https://modelcontextprotocol.io) is an open standard that lets AI assistants connect to external tools and data sources. The **`@coreui/docs-mcp`** server gives your assistant direct access to the official CoreUI documentation, so it answers from the current docs instead of relying on stale training data. It provides: - **Component documentation** — pages, props, events, and slots. - **Live content** — read on demand from `coreui.io`, always matching the latest release. - **Cross-framework links** — where each component is documented for Angular, Bootstrap, React, and Vue. - **Coverage of Bootstrap, React, and Vue** from a single server. The server runs locally over stdio via `npx` — no global install required. ## Installation ### Claude Code Add the server with the CLI, then start a new session and run `/mcp` to verify the connection: ```bash claude mcp add coreui-docs -s user -- npx -y @coreui/docs-mcp --framework vue ``` ### Cursor Create `.cursor/mcp.json` in your project (or `~/.cursor/mcp.json` for global configuration): ```json { "mcpServers": { "coreui-docs": { "command": "npx", "args": ["-y", "@coreui/docs-mcp", "--framework", "vue"] } } } ``` ### VS Code Create `.vscode/mcp.json` in your project. Note that VS Code uses the `servers` key: ```json { "servers": { "coreui-docs": { "type": "stdio", "command": "npx", "args": ["-y", "@coreui/docs-mcp", "--framework", "vue"] } } } ``` ### Windsurf Edit `~/.codeium/windsurf/mcp_config.json`: ```json { "mcpServers": { "coreui-docs": { "command": "npx", "args": ["-y", "@coreui/docs-mcp", "--framework", "vue"] } } } ``` ### Claude Desktop Edit `claude_desktop_config.json` (Settings → Developer → Edit Config): ```json { "mcpServers": { "coreui-docs": { "command": "npx", "args": ["-y", "@coreui/docs-mcp", "--framework", "vue"] } } } ``` ### OpenAI Codex Add it with the CLI, or edit `~/.codex/config.toml` directly: ```bash codex mcp add coreui-docs -- npx -y @coreui/docs-mcp --framework vue ``` ```toml [mcp_servers.coreui-docs] command = "npx" args = ["-y", "@coreui/docs-mcp", "--framework", "vue"] ``` ## Tools Once connected, your assistant can call the following tools: | Tool | Description | | --- | --- | | `list_components` | List documentation pages, optionally filtered by section or a substring. | | `search_docs` | Search the documentation and return the best matching pages. | | `get_doc_page` | Fetch the full Markdown of a page by slug, component name, or URL. | | `get_component_api` | Get the structured API (props, events, slots) for a component. | | `get_cross_framework_links` | Get documentation URLs for a component across every CoreUI framework. | ## Configuration | Flag | Environment variable | Default | Description | | --- | --- | --- | --- | | `--framework ` | `COREUI_DOCS_FRAMEWORKS` | `bootstrap,react,vue` | Enabled editions (comma-separated). The first is the default for tools. | | `--base-url ` | `COREUI_DOCS_BASE_URL` | `https://coreui.io` | Origin of the CoreUI site. The `//docs` path is appended automatically — override only for a staging or self-hosted mirror. | | `--ttl ` | `COREUI_DOCS_TTL_MINUTES` | `360` | Cache freshness window. | | — | `COREUI_DOCS_CACHE_DIR` | OS cache directory | On-disk cache location. | ## Example prompts Once installed, try asking your AI assistant: - "How do I use the CoreUI Vue Multi Select component?" - "What props does the CoreUI Vue Date Picker accept?" - "Show me the CoreUI Vue Modal documentation." - "Where is the Accordion documented across CoreUI frameworks?" The package is open source and published as [`@coreui/docs-mcp`](https://www.npmjs.com/package/@coreui/docs-mcp). --- # Sass > Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project. Utilize our source Sass files to take advantage of variables, maps, mixins, and more. ## File structure Whenever possible, avoid modifying CoreUI's core files. For Sass, that means creating your own stylesheet that imports CoreUI for Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this: ```text your-project/ ├── scss │ └── custom.scss └── node_modules/ └── @coreui/coreui ├── js └── scss ``` If you've downloaded our source files and aren't using a package manager, you'll want to manually create something similar to that structure, keeping CoreUI's source files separate from your own. ```text your-project/ ├── scss │ └── custom.scss └── @coreui/coreui/ ├── js └── scss ``` ## Importing In your `custom.scss`, you'll import CoreUI's source Sass files. You have two options: include all of CoreUI, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins. ```scss // Custom.scss // Option A: Include all of CoreUI @import "../node_modules/@coreui/coreui/scss/coreui"; // Then add additional custom code here ``` ```scss // Custom.scss // Option B: Include parts of CoreUI // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) @import "../node_modules/@coreui/coreui/scss/functions"; // 2. Include any default variable overrides here // 3. Include remainder of required CoreUI stylesheets @import "../node_modules/@coreui/coreui/scss/variables"; // 4. Include any default map overrides here // 5. Include remainder of required parts @import "../node_modules/@coreui/coreui/scss/maps"; @import "../node_modules/@coreui/coreui/scss/mixins"; @import "../node_modules/@coreui/coreui/scss/root"; // 6. Optionally include any other parts as needed @import "../node_modules/@coreui/coreui/scss/utilities"; @import "../node_modules/@coreui/coreui/scss/reboot"; @import "../node_modules/@coreui/coreui/scss/type"; @import "../node_modules/@coreui/coreui/scss/images"; @import "../node_modules/@coreui/coreui/scss/containers"; @import "../node_modules/@coreui/coreui/scss/grid"; @import "../node_modules/@coreui/coreui/scss/helpers"; // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` @import "../node_modules/@coreui/coreui/scss/utilities/api"; // 8. Add additional custom code here ``` With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of CoreUI for Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `coreui.scss` file as your starting point. ## Variable defaults Every Sass variable in CoreUI for Bootstrap includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying CoreUI's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. You will find the complete list of CoreUI's variables in `@coreui/coreui/scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration. Variable overrides must come after our functions are imported, but before the rest of the imports. Here's an example that changes the `background-color` and `color` for the `` when importing and compiling CoreUI for Bootstrap via npm: ```scss // Required @import "../node_modules/@coreui/coreui/scss/functions"; // Default variable overrides $body-bg: #000; $body-color: #111; // Required @import "../node_modules/@coreui/coreui/scss/variables"; @import "../node_modules/@coreui/coreui/scss/maps"; @import "../node_modules/@coreui/coreui/scss/mixins"; @import "../node_modules/@coreui/coreui/scss/root"; // Optional CoreUI components here @import "../node_modules/@coreui/coreui/scss/reboot"; @import "../node_modules/@coreui/coreui/scss/type"; // etc ``` Repeat as necessary for any variable in CoreUI, including the global options below. ## Maps and loops CoreUI for Bootstrap includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended. Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making _removing_ items from a map slightly more difficult. ### Modify map All variables in the `$theme-colors` map are defined as standalone variables. To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file: ```scss $primary: #0074d9; $danger: #ff4136; ``` Later on, these variables are set in CoreUI's `$theme-colors` map: ```scss $theme-colors: ( "primary": $primary, "danger": $danger ); ``` ### Add to map Add new colors to `$theme-colors`, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we'll create a new `$custom-colors` map and merge it with `$theme-colors`. ```scss // Create your own map $custom-colors: ( "custom-color": #900 ); // Merge the maps $theme-colors: map-merge($theme-colors, $custom-colors); ``` ### Remove from map To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert it between our requirements and options: ```scss // Required @import "../node_modules/@coreui/coreui/scss/functions"; @import "../node_modules/@coreui/coreui/scss/variables"; @import "../node_modules/@coreui/coreui/scss/maps"; @import "../node_modules/@coreui/coreui/scss/mixins"; @import "../node_modules/@coreui/coreui/scss/root"; $theme-colors: map-remove($theme-colors, "info", "light", "dark"); // Optional @import "../node_modules/@coreui/coreui/scss/reboot"; @import "../node_modules/@coreui/coreui/scss/type"; // etc ``` ## Required keys CoreUI for Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map's key is being used. For example, we use the `primary`, `success`, and `danger` keys from `$theme-colors` for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you'll need to modify the Sass code that makes use of those values. ## Functions ### Colors Next to the [Sass maps](https://coreui.io/bootstrap/docs/customize/color#color-sass-maps) we have, theme colors can also be used as standalone variables, like `$primary`. ```scss .custom-element { color: $gray-100; background-color: $dark; } ``` You can lighten or darken colors with CoreUI's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect. ```scss // Tint a color: mix a color with white @function tint-color($color, $weight) { @return mix(white, $color, $weight); } // Shade a color: mix a color with black @function shade-color($color, $weight) { @return mix(black, $color, $weight); } // Shade the color if the weight is positive, else tint it @function shift-color($color, $weight) { @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight)); } ``` In practice, you'd call the function and pass in the color and weight parameters. ```scss .custom-element { color: tint-color($primary, 10%); } .custom-element-2 { color: shade-color($danger, 30%); } ``` ### Color contrast In order to meet the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG/) contrast requirements, authors **must** provide a minimum [text color contrast of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and a minimum [non-text color contrast of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast), with very few exceptions. An additional function we include in CoreUI for Bootstrap is the color contrast function, `color-contrast`. It utilizes the [WCAG 2.0 algorithm](https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance) in a `sRGB` colorspace to automatically return a light (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes. For example, to generate color swatches from our `$theme-colors` map: ```scss @each $color, $value in $theme-colors { .swatch-#{$color} { color: color-contrast($value); } } ``` It can also be used for one-off contrast needs: ```scss .custom-element { color: color-contrast(#000); // returns `color: #fff` } ``` You can also specify a base color with our color map functions: ```scss .custom-element { color: color-contrast($dark); // returns `color: #fff` } ``` ### Escape SVG We use the `escape-svg` function to escape the `<`, `>` and `#` characters for SVG background images. When using the `escape-svg` function, data URIs must be quoted. ### Add and Subtract functions We use the `add` and `subtract` functions to wrap the CSS `calc` function. The primary purpose of these functions is to avoid errors when a "unitless" `0` value is passed into a `calc` expression. Expressions like `calc(10px - 0)` will return an error in all browsers, despite being mathematically correct. Example where the calc is valid: ```scss $border-radius: .25rem; $border-width: 1px; .element { // Output calc(.25rem - 1px) is valid border-radius: calc($border-radius - $border-width); } .element { // Output the same calc(.25rem - 1px) as above border-radius: subtract($border-radius, $border-width); } ``` Example where the calc is invalid: ```scss $border-radius: .25rem; $border-width: 0; .element { // Output calc(.25rem - 0) is invalid border-radius: calc($border-radius - $border-width); } .element { // Output .25rem border-radius: subtract($border-radius, $border-width); } ``` ## Mixins Our `@coreui/coreui/scss/mixins/` directory has a ton of mixins that power parts of CoreUI and can also be used across your own project. ### Color schemes A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. ```scss @mixin color-scheme($name) { @media (prefers-color-scheme: #{$name}) { @content; } } ``` ```scss .custom-element { @include color-scheme(dark) { // Insert dark mode styles here } @include color-scheme(custom-named-scheme) { // Insert custom color scheme styles here } } ``` --- # Options > Quickly customize CoreUI for Vue with built-in variables to easily toggle global CSS preferences for controlling style and behavior. Customize CoreUI for Vue with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed. You can find and customize these variables for key global options in CoreUI's `@coreui/coreui/scss/_variables.scss` file. | Variable | Values | Description | | ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- | | `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities](https://coreui.io/bootstrap/docs/utilities/spacing). | | `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | | `$enable-shadows` | `true` or `false` (default) | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. | | `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. | | `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | | `$enable-reduced-motion` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query](https://coreui.io/bootstrap/docs/getting-started/accessibility#reduced-motion), which suppresses certain animations/transitions based on the users' browser/operating system preferences. | | `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). | | `$enable-container-classes` | `true` (default) or `false` | Enables the generation of CSS classes for layout containers. (New in v4.2.0) | | `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. | | `$enable-button-pointers` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. | | `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS](https://coreui.io/bootstrap/docs/getting-started/rfs). | | `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. | | `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities](https://coreui.io/bootstrap/docs/utilities/spacing#negative-margin). | | `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. | | `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. | | `$enable-smooth-scroll` | `true` (default) or `false` | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query](https://coreui.io/bootstrap/docs/getting-started/accessibility#reduced-motion) | | `$enable-ltr` | `false` or `false` (default) | Enables Left-to-Right | | `$enable-rtl` | `true` (default) or `false` | Enables Right-to-Left | --- # CSS variables > Use CoreUI's CSS custom properties for fast and forward-looking design and development. CoreUI includes around two dozen [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS, with dozens more on the way for improved customization on a per-component basis. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's inspector, a code sandbox, or general prototyping. **All our custom properties are prefixed with `cui-`** to avoid conflicts with third party CSS. ## Root variables Here are the variables we include (note that the `:root` is required) that can be accessed anywhere CoreUI's CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files. ```css :root { --cui-blue: #0d6efd; --cui-indigo: #6610f2; --cui-purple: #6f42c1; --cui-pink: #d63384; --cui-red: #dc3545; --cui-orange: #fd7e14; --cui-yellow: #ffc107; --cui-green: #198754; --cui-teal: #20c997; --cui-cyan: #0dcaf0; --cui-black: #000015; --cui-white: #fff; --cui-gray: #8a93a2; --cui-gray-dark: #636f83; --cui-gray-100: #ebedef; --cui-gray-200: #d8dbe0; --cui-gray-300: #c4c9d0; --cui-gray-400: #b1b7c1; --cui-gray-500: #9da5b1; --cui-gray-600: #8a93a2; --cui-gray-700: #768192; --cui-gray-800: #636f83; --cui-gray-900: #4f5d73; --cui-primary: #321fdb; --cui-secondary: #9da5b1; --cui-success: #2eb85c; --cui-info: #39f; --cui-warning: #f9b115; --cui-danger: #e55353; --cui-light: #ebedef; --cui-dark: #4f5d73; --cui-primary-rgb: 50, 31, 219; --cui-secondary-rgb: 157, 165, 177; --cui-success-rgb: 46, 184, 92; --cui-info-rgb: 51, 153, 255; --cui-warning-rgb: 249, 177, 21; --cui-danger-rgb: 229, 83, 83; --cui-light-rgb: 235, 237, 239; --cui-dark-rgb: 79, 93, 115; --cui-white-rgb: 255, 255, 255; --cui-black-rgb: 0, 0, 21; --cui-body-color-rgb: 44, 56, 74; --cui-body-bg-rgb: 255, 255, 255; --cui-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --cui-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --cui-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --cui-body-font-family: var(--cui-font-sans-serif); --cui-body-font-size: 1rem; --cui-body-font-weight: 400; --cui-body-line-height: 1.5; --cui-body-color: rgba(44, 56, 74, 0.95); --cui-body-bg: #fff; --cui-border-width: 1px; --cui-border-style: solid; --cui-border-color: #d8dbe0; --cui-border-color-translucent: rgba(0, 0, 21, 0.175); --cui-border-radius: 0.375rem; --cui-border-radius-sm: 0.25rem; --cui-border-radius-lg: 0.5rem; --cui-border-radius-xl: 1rem; --cui-border-radius-2xl: 2rem; --cui-border-radius-pill: 50rem; --cui-heading-color: unset; --cui-link-color: #321fdb; --cui-link-hover-color: #2819af; --cui-code-color: #d63384; --cui-highlight-bg: #fff3cd; } ``` ## Component variables CoreUI is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of CoreUI components after Sass compilation. Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates. ## Prefix Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable. Customize the prefix via the `$prefix` Sass variable. By default, it's set to `cui-` (note the trailing dash). ## Examples CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables. ```css body { font: 1rem/1.5 var(--cui-font-sans-serif); } a { color: var(--cui-blue); } ``` ## Grid breakpoints While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the mean time, you can use these variables in other CSS situations, as well as in your JavaScript. --- # Breakpoints > Breakpoints are the triggers in CoreUI for Vue.js for how your layout responsive changes across device or viewport sizes. ## Core concepts - **Breakpoints are the building blocks of responsive design.** Use them to control when your layout can be adapted at a particular viewport or device size. - **Use media queries to architect your CSS by breakpoint.** Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use `min-width` in our media queries. - **Mobile first, responsive design is the goal.** CoreUI's CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors. ## Available breakpoints CoreUI for Vue.js includes six default breakpoints, sometimes referred to as _grid tiers_, for building responsively. These breakpoints can be customized if you're using our source Sass files.
Breakpoint Class infix Dimensions
X-Small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px
Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don't specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device. These breakpoints are customizable via Sass—you'll find them in a Sass map in our `_variables.scss` stylesheet. ```scss $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ); ``` For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation](https://coreui.io/bootstrap/docs/layout/grid#sass). ## Media queries Since CoreUI for Vue.js is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes. ### Min-width CoreUI for Vue.js primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components. ```scss // Source mixins // No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }` @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } @include media-breakpoint-up(xxl) { ... } // Usage // Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint .custom-class { display: none; } @include media-breakpoint-up(sm) { .custom-class { display: block; } } ``` These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For example: ```scss // X-Small devices (portrait phones, less than 576px) // No media query for `xs` since this is the default in CoreUI // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // X-Large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } // XX-Large devices (larger desktops, 1400px and up) @media (min-width: 1400px) { ... } ``` ### Max-width We occasionally use media queries that go in the other direction (the given screen size *or smaller*): ```scss // No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }` @include media-breakpoint-down(sm) { ... } @include media-breakpoint-down(md) { ... } @include media-breakpoint-down(lg) { ... } @include media-breakpoint-down(xl) { ... } @include media-breakpoint-down(xxl) { ... } // Example: Style from medium breakpoint and down @include media-breakpoint-down(md) { .custom-class { display: block; } } ``` These mixins take those declared breakpoints, subtract `.02px` from them, and use them as our `max-width` values. For example: ```scss // X-Small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { ... } // Small devices (landscape phones, less than 768px) @media (max-width: 767.98px) { ... } // Medium devices (tablets, less than 992px) @media (max-width: 991.98px) { ... } // Large devices (desktops, less than 1200px) @media (max-width: 1199.98px) { ... } // X-Large devices (large desktops, less than 1400px) @media (max-width: 1399.98px) { ... } // XX-Large devices (larger desktops) // No media query since the xxl breakpoint has no upper bound on its width ``` > Why subtract .02px? Browsers don’t currently support range context queries, so we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision. ### Single breakpoint There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths. ```scss @include media-breakpoint-only(xs) { ... } @include media-breakpoint-only(sm) { ... } @include media-breakpoint-only(md) { ... } @include media-breakpoint-only(lg) { ... } @include media-breakpoint-only(xl) { ... } @include media-breakpoint-only(xxl) { ... } ``` For example the `@include media-breakpoint-only(md) { ... }` will result in : ```scss @media (min-width: 768px) and (max-width: 991.98px) { ... } ``` ### Between breakpoints Similarly, media queries may span multiple breakpoint widths: ```scss @include media-breakpoint-between(md, xl) { ... } ``` Which results in: ```scss // Example // Apply styles starting from medium devices and up to extra large devices @media (min-width: 768px) and (max-width: 1199.98px) { ... } ``` --- # Columns > Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. ## How they work - **Columns build on the grid's flexbox architecture.** Flexbox means we have options for changing individual columns and [modifying groups of columns at the row level](./../grid#row-columns). You choose how columns grow, shrink, or otherwise change. - **When building grid layouts, all content goes in columns.** The hierarchy of CoreUI's grid goes from [container](./../containers) to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences. - **CoreUI for Vue.js includes predefined components for creating fast, responsive layouts.** With [six breakpoints](./../breakpoints) and a dozen columns at each grid tier, we have dozens of components already built for you to create your desired layouts. This can be disabled via Sass if you wish. ## Alignment Use flexbox alignment utilities to vertically and horizontally align columns. ### Vertical alignment ```html ``` ```html ``` ### Horizontal alignment ```html ``` ### Column wrapping If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. ```html ``` ### Column breaks Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple ``s, but not every implementation method can account for this. ```html ``` You may also apply this break at specific breakpoints with our [responsive display utilities](https://coreui.io/bootstrap/docs/utilities/display). ```html ``` ## Reordering ### Order props Use `xs|sm|md|lg|xl|xxl="{ order: 1-5 }"` props for controlling the **visual order** of your content. These props are responsive, so you can set the `order` by breakpoint (e.g., `xs="{ order: 1}" md="{ order: 2}"`). Includes support for `1` through `5` across all six grid tiers. ```html ``` There are also responsive `xs|sm|md|lg|xl|xxl="{ order: 'first' }"` and `xs|sm|md|lg|xl|xxl="{ order: 'last' }"` props that change the `order` of an element by applying `order: -1` and `order: 6`, respectively. These values can also be intermixed with the numbered `xs|sm|md|lg|xl|xxl="{ order: 1-5 }"` values as needed. ```html ``` ### Offsetting columns You can offset grid columns in two ways: our responsive `xs|sm|md|lg|xl|xxl="{ offset: 0-12 }"` grid props and our [margin utilities](https://coreui.io/bootstrap/docs/utilities/spacing). Grid props are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable. #### Offset prop Move columns to the right using `md="{ offset: * }"` props. These props increase the left margin of a column by `*` columns. For example, `md="{ offset: 4 }"` moves `.col-md-4` over four columns. ```html ``` ```html ``` #### Margin utilities You can use margin utilities like `.me-auto` to force sibling columns away from one another. ```html ``` ## Standalone column component The `` component can also be used outside a `` to give an element a specific width. Whenever column component are used as non direct children of a row, the paddings are omitted. ```html ``` --- # Containers > Containers are a fundamental building block of CoreUI for Vue.js that contain, pad, and align your content within a given device or viewport. ## How they work Containers are the most basic layout element in CoreUI for Vue.js and are **required when using our default grid system**. Containers are used to contain, pad, and (sometimes) center the content within them. While containers *can* be nested, most layouts do not require a nested container. CoreUI for Vue.js comes with three different containers: - ``, which sets a `max-width` at each responsive breakpoint - ``, which is `width: 100%` at all breakpoints - ``, which is `width: 100%` until the specified breakpoint The table below illustrates how each container's `max-width` compares to the original `` and `` across each breakpoint.
Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		X-Large
≥1200px 		XX-Large
≥1400px
<CContainer> 100% 540px 720px 960px 1140px 1320px
<CContainer sm> 100% 540px 720px 960px 1140px 1320px
<CContainer md> 100% 100% 720px 960px 1140px 1320px
<CContainer lg> 100% 100% 100% 960px 1140px 1320px
<CContainer xl> 100% 100% 100% 100% 1140px 1320px
<CContainer xxl> 100% 100% 100% 100% 100% 1320px
<CContainer fluid> 100% 100% 100% 100% 100% 100%
## Default container Our default `` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint. ```html ``` ## Responsive containers Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`. ```html ``` ## Fluid containers Use `` for a full width container, spanning the entire width of the viewport. ```html ``` --- # Grid > Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes. ## Example CoreUI's grid system uses a series of containers, rows, and columns to layout and align content. It's built with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together. ```html ``` The above example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent ``. ## How it works Breaking it down, here's how the grid system comes together: - **Our grid supports [six responsive breakpoints](../breakpoints).** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `sm="4"` applies to `sm`, `md`, `lg`, `xl`, and `xxl`). This means you can control container and column sizing and behavior by each breakpoint. - **Containers center and horizontally pad your content.** Use `` for a responsive pixel width, `` for `width: 100%` across all viewports and devices, or a responsive container (e.g., ``) for a combination of fluid and pixel widths. - **Rows are wrappers for columns.** Each column has horizontal `padding` (called a gutter) for controlling the space between them. This `padding` is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to [uniformly apply column sizing](#row-columns) and [gutter classes](../gutters) to change the spacing of your content. - **Columns are incredibly flexible.** There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., `CCol xs="4"` spans four). `width`s are set in percentages so you always have the same relative sizing. - **Gutters are also responsive and customizable.** [Gutter classes are available](../gutters) across all breakpoints, with all the same sizes as our [margin and padding spacing](https://coreui.io/bootstrap/docs/utilities/spacing/). Change horizontal gutters with `xs|sm|md|lg|xl|xxl="{ gutterX: * }"` classes, vertical gutters with `xs|sm|md|lg|xl|xxl="{ gutterY: * }"`, or all gutters with `xs|sm|md|lg|xl|xxl="{ gutter: * }"` classes. `xs|sm|md|lg|xl|xxl="{ gutter: 0 }"` is also available to remove gutters. Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9). ## Grid options CoreUI's grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow: - Extra small (xs) - Small (sm) - Medium (md) - Large (lg) - Extra large (xl) - Extra extra large (xxl) As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints:
xs
<576px 		sm
≥576px 		md
≥768px 		lg
≥992px 		xl
≥1200px 		xxl
≥1400px
Container max-width None (auto) 540px 720px 960px 1140px 1320px
Class prefix <CCol xs=> <CCol sm=> <CCol md=> <CCol lg=> <CCol xl=> <CCol xxl=>
# of columns 12
Gutter width 1.5rem (.75rem on left and right)
Custom gutters Yes
Nestable Yes
Column ordering Yes
## Auto-layout columns Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like ``. ### Equal-width For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width. ```html ``` ### Setting one column width Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column. ```html ``` ### Variable width content Use `
1 of 3 Variable width content 3 of 3
1 of 3 Variable width content 3 of 3
``` ## Responsive classes CoreUI's grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit. ### All breakpoints For grids that are the same from the smallest of devices to the largest, use the `` and `` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to ``. ```html ``` ### Stacked to horizontal Using a single set of `` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`). ```html ``` ### Mix and match Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works. ```html ``` ### Row columns Use the responsive `:{breakpoint}="{ cols: * }"` classes to quickly set the number of columns that best render your content and layout. Whereas normal `` classes apply to the individual columns (e.g., ``), the row columns classes are set on the parent `` as a shortcut. With `:{breakpoint}="{ cols: 'auto' }"` you can give the columns their natural width. Use these row columns classes to quickly create basic grid layouts or to control your card layouts. ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` --- # Gutters > Gutters are the padding between your columns, used to responsively space and align content in the CoreUI for Vue.js grid system. ## How they work - **Gutters are the gaps between column content, created by horizontal `padding`.** We set `padding-right` and `padding-left` on each column, and use negative `margin` to offset that at the start and end of each row to align content. - **Gutters start at `1.5rem` (`24px`) wide.** This allows us to match our grid to the [padding and margin spacers](https://coreui.io/bootstrap/docs/utilities/spacing) scale. - **Gutters can be responsively adjusted.** Use breakpoint-specific gutter props to modify horizontal gutters, vertical gutters, and all gutters. ## Horizontal gutters `:{breakpoint}="{ gutterX: * }"` props can be used to control the horizontal gutter widths. The `` or `` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with `.px-4`: ```html ``` An alternative solution is to add a wrapper around the `` with the `.overflow-hidden` class: ```html ``` ## Vertical gutters `:{breakpoint}="{ gutterY: * }"` props can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the `` at the end of a page. If this occurs, you add a wrapper around `` with the `.overflow-hidden` class: ```html ``` ## Horizontal & vertical gutters `:{breakpoint}="{ gutter: * }"` props can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class. ```html ``` ## Row columns gutters Gutter props can also be added to [row columns](../grid#row-columns). In the following example, we use responsive row columns and responsive gutter props. ```html ``` ## No gutters The gutters between columns in our predefined grid props can be removed with `:{breakpoint}="{ gutter: 0 }"`. This removes the negative `margin`s from `` and the horizontal `padding` from all immediate children columns. **Need an edge-to-edge design?** Drop the parent `` or ``. In practice, here's how it looks. Note you can continue to use this with all other predefined grid props (including column widths, responsive tiers, reorders, and more). ```html ``` --- # Vue Autocomplete Component > Build powerful Vue Autocomplete components with dynamic search, dropdown suggestions, and external data integration. The ultimate Vue.js Autocomplete solution for modern web applications. ## Overview The Vue Autocomplete Component is a powerful, feature-rich autocomplete solution that enhances form usability by providing intelligent suggestions as users type. Whether you're building a Vue.js autocomplete with static array data, fetching data from APIs, or implementing complex search logic, this autocomplete component delivers a smooth, accessible user experience with extensive customization options. Key features of this Vue Autocomplete include: - Dynamic dropdown suggestions with real-time filtering - External data integration with API support - Customizable templates and custom styles - Advanced search capabilities - Performance optimization with virtual scrolling - Accessibility-first design ## Basic example A straightforward demonstration of how to implement a basic autocomplete input field, highlighting essential attributes and configurations. ```html ``` You can also use objects with `value` and `label` properties for more structured data: ```html ``` For a minimal implementation without additional features: ```vue ``` ## Component v-model support The Vue Autocomplete component supports Vue 3's v-model directive for two-way data binding. When using string arrays, v-model binds to the string value. When using object arrays, v-model binds to the `value` property of the selected option. ```html ``` ## Search functionality Configure the search behavior to match your application's needs. The `search` prop determines how the component handles user input and filtering. ### Default search By default, search operates only when the input field is focused and filters options internally: ```html ``` ### Global search Enable global search functionality that allows users to start typing from anywhere within the component to begin searching: ```html ``` ### External search When external search is enabled (`search="external"`), the component delegates search operations to your custom logic or external API. This is perfect for server-side filtering, complex search algorithms, or third-party search services: ```vue ``` You can combine external search with global keyboard navigation: ```vue ``` See the [External Data](#external-data) section for a complete working example. ## Restricted selection Limit users to only select from the provided options by enabling `allow-only-defined-options`. This prevents custom value entry: ```html ``` ## Blur behavior The autocomplete component includes intelligent blur handling that improves user experience by automatically selecting matching options when the user leaves the input field. ### Auto-selection on exact match When a user types a value that exactly matches one option (case-insensitive) and then blurs the input field, the component automatically selects that option: **Example scenario:** - Available options: "Apple", "Banana", "Cherry" - User types "apple" (lowercase) and clicks outside the field - Result: "Apple" is automatically selected ```html ``` ### Strict mode behavior When `allow-only-defined-options` is enabled, the blur behavior enforces strict validation: - **Exact match found:** The matching option is automatically selected - **No exact match:** The input field is cleared to prevent invalid values ```html ``` ### Non-strict mode behavior (default) Without `allow-only-defined-options`, the component allows custom values: - **Exact match found:** The matching option is automatically selected - **No exact match:** The custom value is accepted and emitted via the `change` event - **Partial match:** No auto-selection occurs; the input value remains This is useful when users should be able to enter values not in the predefined list: ```html ``` ## User experience enhancements Enable intelligent hints and auto-completion features to improve user experience. ### Show hints Display intelligent completion hints that preview the first matching option as users type: ```html ``` ### Highlight matching text Enhance search visibility by highlighting matching portions of option labels when users hover over suggestions: ```html ``` ## Validation states Apply validation styling to indicate input validity. ```html ``` ## Disabled state Disable the component to prevent user interaction: ```html ``` ## Sizing Choose from different sizes to match your design system and form layout: ```html ``` ## Cleaner functionality Enable a cleaner button to quickly clear the input element: ```html ``` ## Custom templates The CoreUI Vue Autocomplete Component provides the flexibility to personalize options and group labels by utilizing custom templates. You can easily customize the options using scoped slots: - **`#options="{ option }"`** - For customizing individual option rendering - **`#options-groups="{ option }"`** - For customizing option group headers ```html ``` ### Basic slot usage ```vue ``` ## External Data One of the most powerful features of the Vue Autocomplete component is its ability to work with external data sources, such as REST APIs, GraphQL endpoints, or server-side search services. This is essential when dealing with large datasets that shouldn't be loaded entirely into the client. ### Implementation example Here's how to implement external data loading with proper debouncing to optimize API calls: ```html ``` ### Key features for external data - **Debounced search**: Prevents excessive API calls during rapid typing - **`search="external"`**: Disables internal filtering to rely on server-side search - **`loading` prop**: Shows loading indicators during API requests - **`virtual-scroller`**: Efficiently renders large result sets - **`search-no-results-label`**: Provides user feedback when no results are found ### Debouncing implementation You can implement debouncing using a simple timeout mechanism as shown in the example above, or use CoreUI's built-in `useDebouncedCallback` composable: ```vue ``` Alternatively, you can use `@vueuse/core`'s `refDebounced` to derive a debounced ref: ```vue ``` ## Performance optimization For large datasets, the Vue Autocomplete component includes several performance optimizations: - **Virtual scrolling**: Use `virtual-scroller` to render only visible options - **Debounced search**: Implement search debouncing to reduce API calls - **External filtering**: Delegate filtering to the server with `search="external"` - **Lazy loading**: Load data only when needed ## Events The Vue Autocomplete component emits the following events: - **`@change`**: Fired when the selected option changes. Receives `(option: Option | null)` - **`@input`**: Fired when the search input value changes. Receives `(value: string)` - **`@show`**: Fired when the dropdown opens - **`@hide`**: Fired when the dropdown closes - **`@update:modelValue`**: Fired when the model value changes (for v-model support). Receives `(value: number | string | null)` ```vue ``` ## Accessibility The Autocomplete component includes several accessibility features: - **ARIA attributes**: Proper `role`, `aria-expanded`, `aria-haspopup`, and `aria-autocomplete` attributes - **Screen reader support**: Descriptive labels and announcements for state changes - **Keyboard navigation**: Full keyboard support with arrow keys, Enter, Escape, and Tab - **Focus management**: Proper focus handling and visual focus indicators - **Semantic markup**: Uses appropriate HTML elements and structure ### Keyboard shortcuts | Key | Action | | --- | --- | | Arrow Down | Navigate to the next option or open dropdown | | Arrow Up | Navigate to the previous option | | Enter | Select the highlighted option | | Escape | Close the dropdown and clear focus | | Tab | Accept hint completion (when hints are enabled) | | Backspace/Delete | Clear input and trigger search | ## API Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here. - [<CAutocomplete />](./api/#cautocomplete) --- # Vue Checkbox Component > Create consistent cross-browser and cross-device checkboxes with our Vue checkbox components. ## Approach Browser default checkboxes are replaced with the help of ``. Checkboxes are for selecting one or several options in a list. ## Checks ```html ``` ### vModel Single checkbox, boolean value. ```html ``` We can also bind multiple checkboxes to the same array. ```html ``` ## Indeterminate Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property. ```html ``` ### Disabled Add the `disabled` attribute and the associated `